如何在JavaScript中使用扩展运算符从arr数组创建对象数组？

需求：将输入数组按objectid分组，每个objectid对应一个对象，该对象包含objectid字段和contacts数组，数组中存储对应userid、associationid等信息的条目。

原可行代码（无扩展运算符） #

const arr = [
  {
    "objectid": 1,
    "userid": "1",
    "associationid": "123"
  },
  {
    "objectid": 1,
    "userid": "2",
    "associationid": "456"
  },  
  {
    "objectid": 2,
    "userid": "2",
    "associationid": "456"
  }
];

let res = Object.values(
  arr.reduce((acc, {objectid, userid, associationid}) => {
    (acc[objectid] ??= {objectid, contacts : []}).contacts
      .push({isdelete: '1', contactid: userid, associationid});
    return acc;
  }, {})
);
console.log(res);

问题分析（你的尝试代码） #

你尝试用扩展运算符的代码之所以失败，是因为：

1. 你在对象字面量中直接执行了push操作，而push返回的是数组的新长度，这会导致该长度被当作对象的键名，完全不符合需求。
2. 同时你仍在修改原acc中的对象，这和使用扩展运算符实现 immutable 更新的思路冲突。

正确的扩展运算符实现方案 #

要使用扩展运算符，核心是每次迭代都返回全新的对象，避免修改原累加器中的数据：

const arr = [
  {
    "objectid": 1,
    "userid": "1",
    "associationid": "123"
  },
  {
    "objectid": 1,
    "userid": "2",
    "associationid": "456"
  },  
  {
    "objectid": 2,
    "userid": "2",
    "associationid": "456"
  }
];

const res = Object.values(
  arr.reduce((acc, { objectid, userid, associationid }) => {
    // 构造当前要添加的contact条目
    const newContact = { isdelete: '1', contactid: userid, associationid };
    // 判断是否已存在该objectid的分组
    if (acc[objectid]) {
      // 存在则创建新的分组对象，扩展原分组的contacts数组（添加新条目）
      const updatedGroup = {
        ...acc[objectid],
        contacts: [...acc[objectid].contacts, newContact]
      };
      // 返回全新的累加器对象，替换原分组
      return { ...acc, [objectid]: updatedGroup };
    } else {
      // 不存在则创建新的分组，contacts数组初始包含当前条目
      return { ...acc, [objectid]: { objectid, contacts: [newContact] } };
    }
  }, {})
);

console.log(res);

代码说明 #

• 每次迭代都通过{ ...acc }创建新的累加器对象，避免修改原累加器。
• 对于已存在的分组，通过{ ...acc[objectid] }创建新的分组对象，并用[...acc[objectid].contacts, newContact]生成新的contacts数组（不修改原数组）。
• 使用[objectid]作为动态键名，将更新后的分组或新分组合并到新的累加器对象中。
• 最后用Object.values()提取分组对象数组，得到最终结果。

内容的提问来源于stack exchange，提问作者Karim Ali