JS对象合并与数组合并的4种方式：ES6、Object.assign、递归与jQuery

一、对象合并

1、拓展运算符（...）

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）属性。
对于不同名的属性，则直接保留其值并进行合并。

注意：此方法仅对第一级属性进行深拷贝，从第二级开始均为浅拷贝。

2、Object.assign()

MDN文档中的定义如下：

Object.assign() 方法的作用是将一个或多个源对象中所有可枚举属性的值复制到目标对象，并返回该目标对象。

在对象合并场景下的具体写法如下：

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

从上述代码可以看出，其效果与方法一完全一致。

注意：此方法同样仅对第一级属性进行深拷贝，从第二级开始均为浅拷贝。

3、递归赋值

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

从上述代码可以看出，其效果与方法一相同。该方式类似于直接通过赋值操作增加属性。

注意：此方法同样仅对第一级属性进行深拷贝，从第二级开始均为浅拷贝。

4、jquery中的extend()

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

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

二、数组合并

1、扩展操作符

利用ES6语法的扩展运算符：该方法会创建一个新的数组。

var newArray = [...array,...elements]
console.log(newArray); // ["a", "b", 0, 1, 2]

2、使用array.concat()方法进行合并

使用concat方法：该方法不会修改现有数组，而是创建并返回一个新数组。

var array = ["a", "b"];
var elements = [0, 1, 2];
 
var newArray = array.concat(elements);
console.log(array); //['a', 'b']
console.log(newArray);// ["a", "b", 0, 1, 2]

3、关于Apply

使用Apply方法：该方法将数组的各项添加到另一个数组中，属于修改原数组的操作。

var array = ["a", "b"];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.log(array); // ["a", "b", 0, 1, 2]

4、array.push()方法进行合并

const heroes = ['Batman'];
 
heroes.push('Superman');
 
heroes; // ['Batman', 'Superman']
const heroes = ['Batman', 'Superman'];
const villains = ['Joker', 'Bane'];
 
heroes.push(...villains);
 
heroes; // ['Batman', 'Superman', 'Joker', 'Bane']

以上为个人经验总结，希望能给大家一个参考，也希望大家多多支持本站。

JavaScript对象与数组合并的四种常用方法详解