如何通过reduce操作合并数组中rule.column相同对象的value属性

刚好遇到过类似的需求，用reduce就能轻松实现你要的效果，核心思路是先按column分组收集value，再根据数量调整最终的字段格式，具体步骤和代码如下：

实现步骤 #

• 用reduce分组：创建一个临时对象，以rule.column的值作为键，把相同column的所有value收集到对应的数组中
• 转换格式并处理单个值：把分组后的对象转换成数组，判断每个分组的value数量，单个值就用value字段，多个值用values数组

完整代码示例 #

// 原始数组
const array1 = [
  { rule: { column: "colName", value: "val1" } },
  { rule: { column: "colName", value: "val2" } },
  { rule: { column: "colName", value: "val3" } },
  { rule: { column: "colName2", value: "val4" } }
];

// 第一步：用reduce按column分组收集value
const groupedData = array1.reduce((accumulator, currentItem) => {
  const { column, value } = currentItem.rule;
  
  // 如果当前column还没被分组，初始化一个新的规则对象
  if (!accumulator[column]) {
    accumulator[column] = { rule: { column, values: [value] } };
  } else {
    // 已存在该分组，把当前value追加到数组里
    accumulator[column].rule.values.push(value);
  }
  
  return accumulator;
}, {});

// 第二步：转换为目标数组格式，处理单个value的情况
const array2 = Object.values(groupedData).map(item => {
  const { rule } = item;
  // 如果values数组只有一个元素，改用value字段
  if (rule.values.length === 1) {
    return { rule: { column: rule.column, value: rule.values[0] } };
  }
  // 多个元素则保留values数组
  return item;
});

console.log(array2);

输出结果 #

运行后会得到你想要的数组：

[
  { rule: { column: "colName", values: ["val1","val2","val3"] } },
  { rule: { column: "colName2", value: "val4" } }
]

如果不需要区分单个/多个值，想统一用values数组的话，直接去掉第二步的map处理，用const array2 = Object.values(groupedData)即可，这样所有元素都会有values字段。

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