如何使用ES6方法（如扩展运算符）合并数组中同ID的对象？

当然有！用ES6的reduce结合扩展运算符就能非常优雅地实现这个需求，既简洁又符合现代JavaScript的写法，我给你一步步拆解：

原始数据与期望目标 #

首先先明确我们的输入和输出：

// 原始订单数据
const rawOrders = [
  { "id": "ewq123", "name": "Joshua", "order": "Pizza" },
  { "id": "ewq123", "name": "Joshua", "order": "Burger" },
  { "id": "a512dsa", "name": "Eugene", "order": "Pizza" }
];

// 期望合并后的结果
const expectedResult = [
  { "id": "ewq123", "name": "Joshua", "order": ["Burger", "Pizza"] },
  { "id": "a512dsa", "name": "Eugene", "order": "Pizza" }
];

ES6实现方案 #

这里核心用reduce做聚合，配合扩展运算符处理对象和数组的合并，代码如下：

const mergedOrders = Object.values(
  rawOrders.reduce((acc, currentOrder) => {
    // 检查当前订单的ID是否已经在累加器中存在
    if (acc[currentOrder.id]) {
      // 用扩展运算符复制原有对象的所有属性，避免直接修改原数据
      acc[currentOrder.id] = {
        ...acc[currentOrder.id],
        // 处理order字段：如果已有order是数组就追加，否则转成数组
        order: Array.isArray(acc[currentOrder.id].order)
          ? [...acc[currentOrder.id].order, currentOrder.order]
          : [acc[currentOrder.id].order, currentOrder.order]
      };
    } else {
      // 首次出现的ID，直接用扩展运算符复制当前订单对象存入累加器
      acc[currentOrder.id] = { ...currentOrder };
    }
    return acc;
  }, {}) // 初始化累加器为一个空对象
);

代码解析 #

• reduce的作用：遍历原始订单数组，构建一个以id为键的临时映射对象，方便快速定位重复的订单条目
• 扩展运算符(...)：
  • 复制对象属性时，替代了繁琐的Object.assign，让代码更直观
  • 处理数组时，轻松实现数组的追加操作，同时保持原数组不变（纯函数风格）
• Object.values()：最后把临时映射对象的所有值提取出来，转成我们需要的数组格式

运行这段代码后，mergedOrders就完全符合你的期望结果啦！

内容的提问来源于stack exchange，提问作者Noctis Lucis Caelum