前端对象合并方法

假设需求： 设有对象 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}]}