按相同属性遍历并分组数组的实现方案

问题说明 #

现有如下错误数组：

const errors = [
    {
        "row": 1,
        "key": "volume",
        "errorType": "Data type",
        "expectedType": "number",
        "receivedType": "string"
    },
    {
        "row": 1,
        "key": "units",
        "errorType": "Required data",
        "expectedType": "string"
    },
    {
        "row": 3,
        "key": "year",
        "errorType": "Incorrect data type",
        "expectedType": "number",
        "receivedType": "string"
    },
    {
        "row": 3,
        "key": "make",
        "errorType": "Required data",
        "expectedType": "string"
    }
];

需要将其转换为按row字段分组的格式，同一行的错误数据存入data数组：

const errorGrouped = [
  {
    row: 1,
    data: [
      {
        "key": "volume",
        "errorType": "Data type",
        "expectedType": "number",
        "receivedType": "string"
      },
      {
        "key": "units",
        "errorType": "Required data",
        "expectedType": "string"
      }
    ]
  },
  {
    row: 3,
    data: [
      {
        "key": "year",
        "errorType": "Incorrect data type",
        "expectedType": "number",
        "receivedType": "string"
      },
      {
        "key": "make",
        "errorType": "Required data",
        "expectedType": "string"
      }
    ]
  }
];

解决方案：使用Array.reduce()实现简洁分组 #

利用Array.prototype.reduce()可以高效完成分组逻辑，代码简洁且可读性强：

const errorGrouped = Object.values(errors.reduce((acc, error) => {
  // 解构分离行号与错误数据
  const { row, ...errorData } = error;
  
  // 若当前行号未在累加器中，初始化分组对象
  if (!acc[row]) {
    acc[row] = { row, data: [] };
  }
  
  // 将当前错误数据推入对应行的data数组
  acc[row].data.push(errorData);
  
  return acc;
}, {}));

代码说明 #

1. reduce累加器：初始值为一个空对象，用于临时存储按行号分组的结果，键为行号，值为包含row和data的分组对象。
2. 解构赋值：将每个错误对象的row字段单独取出，剩余属性作为错误详情存入errorData。
3. 分组逻辑：检查累加器中是否已存在当前行号的分组，不存在则创建；将errorData推入对应分组的data数组。
4. 转换为数组：使用Object.values()将累加器的对象值转换为最终的数组格式。

可选：保持行号升序排列 #

如果需要确保结果数组按行号数值从小到大排序，可在最后添加排序逻辑：

const errorGrouped = Object.values(errors.reduce((acc, error) => {
  // 上述分组逻辑
}, {})).sort((a, b) => a.row - b.row);

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