js合并相同结构的对象，内容不覆盖

最新推荐文章于 2024-08-24 18:50:12 发布

原创最新推荐文章于 2024-08-24 18:50:12 发布 · 1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在JavaScript中处理两个结构相同的对象，避免键值数据被后面的对象覆盖，通过使用`Object.keys`和`concat`方法实现了合并操作，生成了一个新的对象，保留了所有键对应的值。

场景

两个结构相同的对象，要将它们具备相同key的数据合并，一般的方法会导致后面覆盖前面，所以需要特殊处理。
用一个简单的demo数据作为例子。

let obj1 = {
name: [{ text: “王妃1” }, { text: “王妃2” }],
age: [{ num: “12” }, { num: “13” }],
};
let obj2 = {
name: [{ text: “秦王3” }, { text: “秦王4” }],
age: [{ num: “45” }, { num: “46” }],
};

要转换为下面这种：

{
name: [ { text: ‘王妃1’ }, { text: ‘王妃2’ }, { text: ‘秦王3’ }, { text: ‘秦王4’ } ],
age: [ { num: ‘12’ }, { num: ‘13’ }, { num: ‘12’ }, { num: ‘46’ } ]
}

代码实现：

let obj1Keys = Object.keys(obj1);
let obj2Keys = Object.keys(obj2);
let newObj = {};
obj1Keys.forEach((item) => {
if (!newObj[item]) {
newObj[item] = [];
}
newObj[item] = newObj[item].concat(obj1[item]);
});
obj2Keys.forEach((item) => {
if (!newObj[item]) {
newObj[item] = [];
}
newObj[item] = newObj[item].concat(obj2[item]);
});
console.log(newObj)