javaScript合并对象的多种方式及知识扩展

目录

• 1、方式一：Object.assign(obj1, obj2, …)
• 2、方式二：es6 新增语法，扩展运算符 … 【三点】
• 知识扩展：
• 总结：

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合并对象方式内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！