如何合并JavaScript数组中的对象且不覆盖属性值？

首先必须明确：JavaScript 对象中不允许存在重复的属性名，你想要的目标结构在语法上是不合法的——当同一个对象里出现多个相同键时，后面的键值对会直接覆盖前面的，最终只会保留最后一个对应的值。

所以我们需要调整结构，把相同键对应的所有值存入一个数组，这是符合JS语法且能完整保留所有数据的合理方案，最终结构如下：

[
  {
    "202229": ["8.418", null, null],
    "202230": ["10.713", "0.859"]
  }
]

实现代码 #

你可以用 reduce 方法完成这个转换，代码如下：

const originalArray = [
    { "202229": "8.418" },
    { "202229": null },
    { "202229": null },
    { "202230": "10.713" },
    { "202230": "0.859" }
];

const result = [originalArray.reduce((acc, curr) => {
    // 获取当前对象的唯一键
    const key = Object.keys(curr)[0];
    // 获取当前键对应的值
    const value = curr[key];
    
    // 如果累加器里没有这个键，就初始化一个空数组
    if (!acc[key]) {
        acc[key] = [];
    }
    // 将当前值推入数组
    acc[key].push(value);
    
    return acc;
}, {})];

console.log(result);

代码逻辑解释 #

• 用 reduce 遍历原数组，初始累加器是一个空对象
• 对每个单键对象，提取它的键和对应的值
• 检查累加器中是否已有该键：没有则创建数组，有则直接把值推入数组
• 最后把累加得到的对象放进数组，得到目标结构

内容的提问来源于stack exchange，提问作者Sandeep Kashyap