javaScript中合并多个对象

快来打我* 2022-12-15 11:03 181阅读 0赞

![afb2fe35a1f20dca28adcbb615230408.png][]

#### 1.利用assign合并多个对象，第一个参数为目标对象，后面可以有多个源对象。 ####

*  首先我们需要知道的是assign实行的是浅拷贝，也就是说如果源对象的某个属性值是对象，那么assign拷贝的是它的引用。
 *  assign是将源对象的可枚举属性复制到目标对象，如果属性名相同后面的属性会覆盖前面属性，只有一个参数assign会直接返回该参数。
 *  如果参数不是对象，assign会先将其转为对象，再进行操作
 *  assign可以处理数组，但数组会被视为对象

let obj1 = { 
                name: 'dk',
                age: '99',
                feature: 'stronge'
            }
        
            let obj2 = { 
                name: 'tk',
                age: '99',
                feature1: 'noStronge',
                address: { 
                    city: '广州',
                    address: { 
                    city: '深圳'
                    }
                },
                skills: ['JavaScript', 'React', 'Node']
            }
        
            let res = Object.assign(obj1, obj2);
            res.address.address.city = '广州';
            console.log(obj2);
            console.log(res);

#### 2.利用扩展运算符 ####

*  需要注意的是利用扩展运算符…合并对象 同样是进行浅拷贝

let obj1 = { 
                name: 'dk',
                age: '99',
                feature: 'stronge'
            }
        
            let obj2 = { 
                name: 'tk',
                age: '99',
                feature1: 'noStronge',
                address: { 
                    city: '广州',
                    address: { 
                    city: '深圳'
                    }
                },
                skills: ['JavaScript', 'React', 'Node']
            }
        
            let res = { ...obj1, ...obj2};
            res.address.address.city = '杭州';
            console.log(obj2);
            console.log(res);

#### 3.手写函数（浅拷贝实现） ####

let merger = (...opts) => { 
                let res = { };
                
                let combine = (opt) => { 
                    for(let prop in opt) { 
                        if(opt.hasOwnProperty(prop)) { 
                            res[prop] = opt[prop];
                        }
                    }
                }
        
                //扩张运算符将两个对象合并到一个数组里，因此opts可以调用length方法
                for (let i = 0; i < opts.length; i++) { 
                    combine(opts[i]);
                }
                return res;
            }
    
    
            let obj1 = { 
                name: 'dk',
                age: '99',
                feature: 'stronge'
            }
        
            let obj2 = { 
                name: 'tk',
                age: '99',
                feature1: 'noStronge',
                address: { 
                    city: '广州',
                    address: { 
                    city: '深圳'
                    }
                },
                skills: ['JavaScript', 'React', 'Node']
            }
        
            let res = merger(obj1, obj2);
        
            //查看是否是浅拷贝
            res.address.address.city = '杭州';
            console.log(res);
            console.log(obj2);

##### 上面实现的函数主要的知识点有： #####

*  Object对象的hasOwnProperty方法，主要用于判断实例对象是否有该属性。
 *  for in 循环主要用于遍历对象属性。不管是自身的还是继承的属性。
 *  既然说到for in，顺便提一下for of 与for in的区别
    
     *  先说结论，for in 一般用于遍历对象属性，for of 一般用于遍历数组。
     *  官方文档给的解释是for in 用于循环一个可枚举对象，for of用于可迭代对象，可枚举对象和可迭代对象之间的关系就是：可枚举对象视为矩形，可迭代对象视为正方形。因此，所有可迭代对象都是可枚举对象，但并非所有可枚举都是可迭代对象。它们之间的关系就和矩形和正方形之间差不多。
     *  用object来说的话，for in遍历的是key，for of 遍历的是value，但是js中的object用for of会直接报错。

#### 4.手写函数（实现深拷贝） ####

*  下面实现深拷贝的函数思路和浅拷贝差不多，就是多出了一个递归，如果有不了解递归的小伙伴，可以去了解一下。

let merger = (...opts) => { 
                let res = { };
                
                let combine = (opt) => { 
                    for(let prop in opt) { 
                        if(opt.hasOwnProperty(prop)) { 
        
                            //下面是深拷贝与浅拷贝的区别，用到了递归的思想
                            if(Object.prototype.toString.call(opt[prop]) === '[object Object]') { 
        
                                res[prop] = merger(res[prop], opt[prop]);
        
                            }else { 
        
                                res[prop] = opt[prop];
        
                            }
                            
                        }
                    }
                }
        
                //扩张运算符将两个对象合并到一个数组里因此可以调用length方法
                for (let i = 0; i < opts.length; i++) { 
                    combine(opts[i]);
                }
                return res;
            }
    
    
            let obj1 = { 
                name: 'dk',
                age: '99',
                feature: 'stronge'
            }
        
            let obj2 = { 
                name: 'tk',
                age: '99',
                feature1: 'noStronge',
                address: { 
                    city: '广州',
                    address: { 
                    city: '深圳'
                    }
                },
                skills: ['JavaScript', 'React', 'Node']
            }
        
            let res = merger(obj1, obj2);
        
            //查看是否是浅拷贝
            res.address.address.city = '杭州';
            console.log(obj2);
            console.log(res);

##### 上面代码的知识点有 #####

*  Object.prototype.toString.call() 用于判断类型，他其实是toString( )方法和call( )方法结合使用，toString( ) 方法用于返回对象类型字符串，而call( )方法就是绑定this嘛。
 *  上面在merger中调用merger就是递归的思想，有兴趣的小伙伴可以去学学递归的思想。

#### 5.最后介绍最后一种办法Lodash’s中的merge( )方法。Lodash’s是node中的库。它也是一种深拷贝的办法。 ####

const _ = require('lodash');
        
        let obj1 = { 
            name: 'dk',
            age: '99',
            feature: 'stronge'
        }
        
        let obj2 = { 
            name: 'tk',
            age: '99',
            feature1: 'noStronge',
            address: { 
                city: '广州',
                address: { 
                city: '深圳'
                }
            },
            skills: ['JavaScript', 'React', 'Node']
        }
        
        const res = _.merge(obj1, obj2);
        console.log(res);

[afb2fe35a1f20dca28adcbb615230408.png]: /images/20221123/ed717ac7796640fc8418fbd3a7b31f88.png

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关多个pdf文件合并

使用maven引入jar包： <dependency> <groupId>com.lowagie</groupId> <artifac

向右看齐/ 2024年04月01日 16:52/ 0 赞/ 147 阅读

相关两个数组对象合并

\`\`\` let array = \[\{label:9000,items:\[\{a:'相同'\}\]\},\{label:2000,items:\[\{a:'相同'\

我会带着你远行/ 2023年06月10日 04:26/ 0 赞/ 20 阅读

相关合并多个commit记录

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

野性酷女/ 2023年01月12日 11:55/ 0 赞/ 158 阅读

相关 JavaScript 学习笔记《合并对象，合并数组》

JavaScript 学习笔记《合并对象，合并数组》合并对象 Object.assign() 展开语法合并数组 A

╰半橙微兮°/ 2022年12月27日 07:59/ 0 赞/ 245 阅读

相关 javaScript中合并多个对象

![afb2fe35a1f20dca28adcbb615230408.png][] 1.利用assign合并多个对象，第一个参数为目标对象，后面可以有多个源对象。

快来打我*/ 2022年12月15日 11:03/ 0 赞/ 182 阅读

相关 git合并多个commits

> 参考资料:https://juejin.im/entry/6844903600976576519 (git命令) 背景我们在写代码有时候会碰到这种情况，我们自己写

末蓝、/ 2022年11月20日 08:22/ 0 赞/ 222 阅读

相关免费合并多个PDF

[https://www.ilovepdf.com/zh-cn/merge\_pdf][https_www.ilovepdf.com_zh-cn_merge_pdf] [h

本是古典何须时尚/ 2022年09月06日 01:16/ 0 赞/ 241 阅读

相关多个页面共享JAVASCRIPT 变量，对象，函数

<html> <head> <title>index</title> </head> <frameset cols="20%,80%">

秒速五厘米/ 2022年08月24日 04:24/ 0 赞/ 137 阅读

相关 Javascript 对象（object）合并

原文出处： [https://www.cnblogs.com/yes-V-can/p/5631645.html][https_www.cnblogs.com_yes-V-can

亦凉/ 2022年05月23日 02:54/ 0 赞/ 295 阅读

相关 linux合并多个文件

linux在处理系统命令和文件方面表现的尤其突出，合并文件只需要两行命令 cd 要合并文件的目录下 find . -type f -exec cat \{\} \\;>al

Myth丶恋晨/ 2021年09月26日 06:14/ 0 赞/ 513 阅读