如何使用reduce和扩展运算符对对象数组进行分组

要实现无突变（immutable）的数组分组，核心是每次迭代时创建新的数组和对象，而非修改原有引用。你之前尝试扩展运算符时元素被替换，是因为没有正确保留已有数组的元素。以下是可行的实现方案：

const result = test.reduce((r, a) => {
  const method = a.shippingMethod.method;
  return {
    // 保留之前已完成的所有分组数据
    ...r,
    // 为当前method创建新数组，追加新元素
    [method]: [...(r[method] || []), a.shippingMethod]
  };
}, {});

代码说明 #

1. 返回全新累加对象：用...r展开之前的分组结果，确保不会丢失已处理的数据，避免直接修改原累加器对象
2. 处理当前分组：
   • 如果当前method还未生成分组数组，就用空数组[]作为初始值
   • 通过扩展运算符...复制已有数组的全部元素，再追加当前的shippingMethod对象，生成全新的数组
   • 借助计算属性名[method]，将新数组绑定到对应的分组键上

输出结果 #

执行后得到的结果与你原有代码完全一致，但全程没有修改任何原有数组或对象，完全符合无突变要求：

{
  FEDEX_2_DAY: [{
    method: "FEDEX_2_DAY",
    name: "Product 3",
    shipping: "FEDEX 2 DAY"
  }],
  FEDEX_GROUND: [{
    method: "FEDEX_GROUND",
    name: "Product 2",
    shipping: "Standard Shipping"
  }, {
    method: "FEDEX_GROUND",
    name: "Product 4",
    shipping: "Standard Shipping"
  }],
  IN_HOME_ASSEMBLY: [{
    method: "IN_HOME_ASSEMBLY",
    name: "product 1",
    shipping: "Assembly Enabled"
  }]
}

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