当前位置:网站首页>js中对象合并的4种方式,对象合并的4种方法
js中对象合并的4种方式,对象合并的4种方法
2022-06-24 09:50:00 【燕穗子博客】
目录
一、对象合并
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']
边栏推荐
- Distribute proofs of manuscripts by scanning
- Hbuilder makes hero skin lottery games
- numpy. logical_ or
- 进程与多线程
- 线程运行原理
- SQL Server AVG function rounding
- Uniapp develops wechat official account, and the drop-down box selects the first one in the list by default
- leetCode-498: 对角线遍历
- 【资源分享】2022年第五届土木,建筑与环境工程国际会议(ICCAEE 2022)
- charles抓包工具使用教程
猜你喜欢
Thread operation principle
機械臂速成小指南(二):機械臂的應用
2022 the most complete and detailed JMeter interface test tutorial and detailed interface test process in the whole network - JMeter test plan component (thread < user >)
希尔排序图文详解+代码实现
Hbuilder makes hero skin lottery games
Flink cluster construction and enterprise level yarn cluster construction
图解杂项【防止丢失进行存档用的】
Resolved: methods with the same name as their class will not be constructors in
2022 International Symposium on intelligent robots and systems (isoirs 2022)
Leetcode-223: rectangular area
随机推荐
How to use multiple kindeditor editors on a page and pass values to the server
Safety and food security for teachers and students of the trapped Yingxi middle school
SQL Server AVG function rounding
Flink checkpoint and savepoint
機械臂速成小指南(二):機械臂的應用
leetCode-1051: 高度检查器
numpy. linspace()
2022年智能机器人与系统国际研讨会(ISoIRS 2022)
Record the range of data that MySQL update will lock
Leetcode-1051: height checker
tf. errors
SSM integration
6. package management business development
线程池的状态
分布式事务原理以及解决分布式事务方案
Leetcode-223: rectangular area
【资源分享】2022年第五届土木,建筑与环境工程国际会议(ICCAEE 2022)
Learn to use the phpstripslush function to remove backslashes
[energy reports] International Conference on energy and environmental engineering in 2022 (cfeee 2022)
leetCode-1089: 复写零