假设需求： 设有对象 obj1 ,obj2,需要得到对象 obj3
let obj1 = { a :'a' }, obj2 = { b :'b' }; → let obj3 = { a :'a', b :'b' }
一、JavaScript原生对象合并方法
-
1、Object.assign()方法，返回合并后的对象，且第一个目标对象自身也会改变为合并对象后的值。
注：该方法是浅拷贝let obj1 = {a : 'a'}; let obj2 = {b : 'b'}; let obj3 = {}; obj3 = Object.assign(obj1, obj2); console.log(obj3); //{a: "a", b: "b"} console.log(obj1); //注意目标对象自身也会改变{a: "a", b: "b"} console.log(obj2); //{b: "b"} //尽量不改变原对象的值 obj3 = {}; Object.assign(obj3, obj1, obj2); console.log(obj3); //{a: "a", b: "b"}//浅拷贝演示 //(拷贝完之后，仅仅只是拷贝了对象的指引，一但所值位置的对象值有所改变，则指向该地址的值都会影响而改变) let obj4 = {'a':1}; let obj5 = {'b':{'b1':22,'b2':33}}; let obj6 = Object.assign(obj4, obj5); console.log(obj4.b.b1) // 22 obj5.b.b1 = 44; console.log(obj4.b.b1); //44 obj4.b仅拷贝了对象的指引，所以受原obj5的影响 console.log(obj6.b.b1); //44 obj6.b.b2 = 66; console.log(obj4.b.b2); //66 console.log(obj5.b.b2); //66 obj4.b.b1 = 55; console.log(obj5.b.b1); //55 console.log(obj6.b.b1); //55 -
2、遍历赋值
原生代码
let obj1={'a':1}; let obj2={'b':2,'c':3}; for(var key in obj2){ //hasOwnProperty是判断自有属性，确认对象obj1中不存在该属性 //使用 for in循环遍历对象的属性时，原型链上的所有属性都将被访问会避免型对象扩展带来的干扰 if(obj2.hasOwnProperty(key) && (!obj1.hasOwnProperty(p)){ obj1[key]=obj2[key]; } } console.log(obj1);//{'a':1,'b':2,'c':3};
二、JQuery对象合并方法
-
1、使用JQuery的extend方法（引入JQuery；重命名$；使用JQuery的extend方法），
可以进行深拷贝console.log(typeof [1,3,4] === 'object') //true,数组也为对象 //第一个参数为：是否进行深拷贝（true为深拷贝） //同bject.assign一样会修改第一个目标对象的值， obj3 = jQuery.extend([deep], obj1, obj2) //深拷贝演示 //(拷贝完之后，是拷贝了对象的所有属性以及值，后面修改原对象值，不会对新生成的对象有影响) let obj1={'a':1}; let obj2={'b':{'b1':22,'b2':33}}; $.extend(true, obj1, obj2); //第一个参数设为true表示深复制 console.log(obj1.b.b1) // 22 obj2.b.b1 = 44; //obj2重新赋值 console.log(obj1.b.b1) // 22 obj1拷贝了obj2的所有属性以及值，并不受obj2的影响
三、lodash对象合并方法
//下载loadsh
npm i --save lodash
//在项目中引入
let lodash = require("lodash");
//使用别名
window.lodash = window._ = lodash;
1、assign 方法。分配来源对象的可枚举属性到目标对象上。 来源对象的应用规则是从左到右，随后的下一个对象的属性会覆盖上一个对象的属性。
注意: 这方法会改变 object本身
参数:
object (Object): 目标对象。
[sources] (...Object): 来源对象。
返回: (Object): 返回 object.
let obj1 = {a : 'a'};
let obj2 = {b : 'b'};
_.assign(obj1, obj2);
console.log(obj1); //{a: "a", b: "b"}
2、extend 方法。这个方法类似 _.assign， 除了它会遍历并继承来源对象的属性。
注意: 这方法会改变 object本身
参数:
object (Object): 目标对象。
[sources] (...Object): 来源对象。
返回: (Object): 返回 object.
let obj3 = {a : 'a', c : 'c'};
let obj4 = {a :'q', b : 'b'};
_.extend(obj3, obj4);
console.log(obj3); //{a: "q", c: "c", b: "b"}
console.log(obj4); //{a: "q", b: "b"}
3、merge 方法。该方法类似_.assign， 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。
注意: 这方法会改变 object本身
参数:
object (Object): 目标对象。
[sources] (...Object): 来源对象。
返回: (Object): 返回 object.
var object = {
'a': [{ 'b': 2 }, { 'd': 4 }]
};
var other = {
'a': [{ 'c': 3 }, { 'e': 5 }]
};
_.merge(object, other); // {'a':[{b: 2, c: 3},{d: 4, e: 5}]}
