js之对象的合并

法一：拓展运算符（...）

ES6入门中是这样说的:

对象的扩展运算符（...）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

用于对象合并，写法如下：

let obj1 = {
    name: '陈伟霆',
    gender: '男',
    hobby: '唱歌'
};
let obj2 = {
    name: '陈伟霆',
    gender: '男',
    hobby: '跳舞',
    nationality: '中国'
};

let obj = {...obj1, ...obj2};
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出：

• 同名属性：合并，并且后边的（obj2）把前边的（obj1）覆盖。
• 不同名属性：属性值不变，只合并。

注：第一级是深拷贝，第二级开始都是浅拷贝。

法二：Object.assign()

MDN上是这样写的：

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。

用于对象合并，写法如下： 

let obj = Object.assign({}, obj1, obj2);
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出，效果与法一相同。 

注：第一级是深拷贝，第二级开始都是浅拷贝。

法三：递归赋值

let obj = obj1;
for (var p in obj2){
    if(obj2.hasOwnProperty(p))
    obj[p] = obj2[p];
}
console.log(obj);  // { name: '陈伟霆', gender: '男', hobby: '跳舞', nationality: '中国' }

由上面的代码可以看出，效果与法一相同。 

注：第一级是深拷贝，第二级开始都是浅拷贝

法四：jquery中的extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

$.extend(obj1, obj2)  // 浅拷贝
$.extend(true, obj1, obj2)  // 深拷贝