javaScript合并对象的多种方式及知识扩展
更新时间：2023年02月14日 11:31:14 作者：猿小张
众所周知JavaScript中有多种方法可以合并对象,下面这篇文章主要给大家介绍了关于javaScript合并对象的多种方式及知识扩展,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
1、方式一：Object.assign(obj1, obj2, …)
参数1：obj1 是目标对象
参数2：obj2 是源对象注意：对象与对象之间，同名属性，会被后面对象的属性值所覆盖
const obj1 = {
a: 1,
b: 2,
}
const obj2 = {
b: 3,
c: 4,
}
const result = Object.assign(obj1, obj2)
console.log(result) // {a: 1, b: 3, c: 4}2、方式二：es6 新增语法，扩展运算符 … 【三点】
{…obj1, …obj2}
注意：对象与对象之间，同名属性，会被后面对象的属性值所覆盖
const obj1 = {
a: 1,
b: 2,
}
const obj2 = {
b: 3,
c: 4,
}
const result = {...obj1, ...obj2} // 返回一个新的对象。
console.log(result) // {a: 1, b: 3, c: 4}
// 顺带一提， 数组之间的合并，也可以使用 扩展运算符 .
// 如： [...arr1, ...arr2]
知识扩展：
扩展运算符 … 【三点】，也可以用于 数组与数组之间的合并。
不同的是：
数组之间 只会合并，就算是相同的值，也不会覆盖。（这是不同于对象的地方。）
let arr1 = [1,2,4] let arr2 = [4,5,6] let arr3 = [...arr1, ...arr2] console.log(arr3) // [1, 2, 4, 4, 5, 6]
最后需要提醒的是，在合并对象时如果键值相同的对象属性类型不同，例如一个为字符串类型，一个为数值类型，会覆盖之前的属性，因此需要根据项目需求做出相应的处理。
此外，如果需要对合并对象的属性进行特殊处理，例如合并对象的属性值是一个数组，需要合并成一个新数组，可以使用 Array.concat() 方法。
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = Object.assign({}, obj1, {
a: obj1.a.concat(obj2.a)
});
console.log(obj3); // { a: [1, 2, 3, 4] }
或者使用扩展运算符
const obj1 = { a: [1, 2] };
const obj2 = { a: [3, 4] };
const obj3 = {...obj1, a: [...obj1.a, ...obj2.a]}
console.log(obj3); // { a: [1, 2, 3, 4] }此外，如果需要对合并对象的属性值进行进一步的处理，如去重、排序等，可以使用 Array.filter()、Array.sort() 等方法。
总结：
到此这篇关于javaScript合并对象的多种方式及知识扩展的文章就介绍到这了,更多相关js合并对象方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
JavaScript Event学习第二章 Event浏览器兼容性
在这一章我将对重要的事件做一个概述，包括一些流行的浏览器的兼容性问题。2010-02-02
下面小编就为大家带来一篇JavaScript 函数的执行过程。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了JavaScript中string转换成number介绍,本文讲解了3种将string值转换成number的方法,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS实现新浪微博效果带遮罩层的弹出框代码,涉及JavaScript响应鼠标事件动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
今天小编就为大家分享一篇layer.msg()去掉默认时间,实现手动关闭的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了微信小程序实现签字功能,本文通过效果图展示，实例代码讲解的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
虽然Uniapp可以使用Vue.js自带的$http,但也可以使用Axios,只需要在项目中进行简单的配置,这篇文章主要给大家介绍了关于uniapp引入axios异步框架的相关资料,需要的朋友可以参考下2023-12-12
这篇文章主要为大家详细介绍了微信小程序canvas实现签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
这篇文章主要介绍了JavaScript switch语句使用方法简介,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了微信小程序 JS动态修改样式的实现代码,原理是绑定数据，然后动态的修改数据，从而实现动态样式的改变而已,需要的朋友可以参考下2017-02-02
最新评论