javaScript合并对象的多种方式及知识扩展
猿小张 人气:01、方式一: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() 等方法。
总结:
加载全部内容