当前位置:网站首页>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']
边栏推荐
- 【IEEE出版】2022年智能交通与未来出行国际会议(CSTFM 2022)
- cuda runtime error (801) : Raw out
- 【资源分享】2022年第五届土木,建筑与环境工程国际会议(ICCAEE 2022)
- Solve the timeout of Phoenix query of dbeaver SQL client connection
- leetCode-1051: 高度检查器
- 【IEEE出版】2022年工业自动化,机器人与控制工程国际会议(IARCE 2022)
- 包装类型与基本类型的区别
- leetCode-929: 独特的电子邮件地址
- 包装类型的缓存机制
- np. float32()
猜你喜欢
Resolved: methods with the same name as their class will not be constructors in
Flink checkPoint和SavePoint
Illustration miscellaneous [for archiving to prevent loss]
Flink checkpoint and savepoint
Leetcode - 498: traversée diagonale
抓包工具charles實踐分享
JMeter接口测试工具基础— 取样器sampler(二)
Hill sorting graphic explanation + code implementation
3. addition, deletion, modification and query of employees
Practice sharing of packet capturing tool Charles
随机推荐
What you must know about distributed systems -cap
Flink checkpoint and savepoint
Learn to use PHP to implement unlimited comments and unlimited to secondary comments solutions
【资源分享】2022年环境工程与生物技术国际会议(CoEEB 2022)
web网站开发,图片懒加载
A method to solve the self-adaptive width and height of the internal picture of rich text label in wechat applet
线程运行原理
[IEEE publication] 2022 International Conference on industrial automation, robotics and Control Engineering (iarce 2022)
88. merge ordered arrays
[resource sharing] 2022 International Conference on Environmental Engineering and Biotechnology (coeeb 2022)
Normal equation
Appium automation test foundation - mobile end test environment construction (I)
Wechat applet rich text picture width height adaptive method introduction (rich text)
分布式事务原理以及解决分布式事务方案
cuda runtime error (801) : Raw out
[IEEE publication] 2022 International Conference on service robots (iwosr 2022)
Sort out interface performance optimization skills and kill slow code
Spark submission parameter -- use of files
88.合并有序数组
leetCode-面试题 01.05: 一次编辑