js对象合并的4种方式与数组合并的4种方式
短信预约 -IT技能 免费直播动态提醒
一、对象合并
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']以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
