JavaScript 对象数组重构：基于特定字段进行分组与转换

本教程详细阐述了如何利用 javascript 的 `array.prototype.reduce()` 方法，将一个扁平的对象数组根据其 `type` 字段中的特定分隔符（如 `@`）进行分组和结构转换。通过解析 `type` 字段提取分组键和动作，并动态构建一个嵌套的数组结构，实现数据的高效重塑，最终生成一个按组分类的项列表。

在前端开发中，我们经常需要对从后端获取或本地生成的数据进行结构化处理，以适应特定的UI展示或业务逻辑需求。一个常见的场景是将一个包含复合标识符的扁平数组，转换为一个按标识符部分分组的嵌套数组。

问题描述与目标结构

假设我们有一个初始的 JavaScript 对象数组，其中每个对象都包含一个 type 字段，该字段由“组名”和“动作名”通过 @ 符号连接而成，例如 "group1@action1"。

原始数据结构示例：

const input = [{
  "type": "group1@action1",
  "label": "labelA",
  "placeholders": ["b", "a", "r"]
}, {
  "type": "group1@action2",
  "label": "labelB",
  "placeholders": ["x", "y", "z"]
}, {
  "type": "group2@action123",
  "label": "labelC",
  "placeholders": ["a", "b", "c"]
}];

我们的目标是将这个扁平数组重构为一个新的数组，其中每个元素代表一个组（group），并包含一个 items 数组，该数组中存放属于该组的所有原始数据项，但每个项的 type 字段会被拆分为单独的 action 字段。

立即学习“Java免费学习笔记（深入）”；

目标数据结构示例：

TalkMe

与AI语伴聊天，练习外语口语

下载

[
  {
    "group": "group1",
    "items": [
      {
        "action": "action1",
        "label": "labelA",
        "placeholders": ["b", "a", "r"]
      },
      {
        "action": "action2", // 注意这里是action2，原问题中action写错了，已修正
        "label": "labelB",
        "placeholders": ["x", "y", "z"]
      }
    ]
  },
  {
    "group": "group2",
    "items": [
      {
        "action": "action123",
        "label": "labelC",
        "placeholders": ["a", "b", "c"]
      }
    ]
  }
]

解决方案：使用 Array.prototype.reduce()

Array.prototype.reduce() 方法是 JavaScript 中一个非常强大的数组迭代器，它能够将数组中的所有元素归约为一个单一的值。在本例中，我们将利用它将原始数组归约为我们所需的嵌套数组结构。

核心思路

1. 迭代：遍历 input 数组中的每一个对象。
2. 解析：对于每个对象的 type 字段，使用 @ 作为分隔符将其拆分为 group 和 action。
3. 查找与判断：在累加器（result 数组）中查找当前 group 是否已存在。
   • 如果存在，则将当前项（转换为新的 action 格式）添加到该组的 items 数组中。
   • 如果不存在，则创建一个新的组对象，并将其添加到 result 数组中，同时将当前项作为第一个元素放入新组的 items 数组。
4. 累加：每次迭代都返回更新后的 result 数组。

详细步骤与代码实现

const input = [
  {
    "type": "group1@action1",
    "label": "labelA",
    "placeholders": ["b", "a", "r"]
  },
  {
    "type": "group1@action2",
    "label": "labelB",
    "placeholders": ["x", "y", "z"]
  },
  {
    "type": "group2@action123",
    "label": "labelC",
    "placeholders": ["a", "b", "c"]
  }
];

const output = input.reduce((result, item) => {
  // 1. 解析 type 字段，使用 split('@') 方法更简洁和健壮
  // 相比于 substring 结合 indexOf，split 方法能够更好地处理分隔符不存在或多次出现的情况
  const [group, action] = item.type.split("@");

  // 2. 在累加器 (result 数组) 中查找当前组是否已存在
  const existingGroup = result.find(groupItem => groupItem.group === group);

  // 3. 根据查找结果进行处理
  if (existingGroup) {
    // 如果组已存在，则将当前项（转换为新的 action 格式）推入其 items 数组
    existingGroup.items.push({
      action, // ES6 属性简写，等同于 action: action
      label: item.label,
      placeholders: item.placeholders
    });
  } else {
    // 如果组不存在，则创建一个新的组对象，并将其添加到 result 数组
    result.push({
      group, // ES6 属性简写，等同于 group: group
      items: [
        {
          action,
          label: item.label,
          placeholders: item.placeholders
        }
      ]
    });
  }

  // 4. 返回更新后的累加器
  return result;
}, []); // reduce 的第二个参数是初始值，这里是一个空数组，作为累加器的起始状态

console.log(output);

代码解释

• input.reduce((result, item) => { ... }, []): reduce 方法接收一个回调函数和一个初始值。
  • result: 这是累加器，在每次迭代中都会被更新并传递给下一次迭代。初始值为 []（一个空数组），它将最终成为我们的 output 数组。
  • item: 当前正在被处理的数组元素。
• const [group, action] = item.type.split("@");: 使用数组解构赋值，将 item.type 字符串通过 @ 分割成两部分，并直接赋值给 group 和 action 变量。这是提取组名和动作名最简洁高效的方式。
• result.find(groupItem => groupItem.group === group);: 在当前的 result 数组中查找是否已经存在一个 group 属性与当前 group 匹配的对象。find 方法返回第一个匹配的元素，如果没有找到则返回 undefined。
• if (existingGroup) { ... } else { ... }: 根据 existingGroup 是否存在来决定是向现有组添加项，还是创建一个新组。
• existingGroup.items.push({ ... });: 如果组已存在，直接向其 items 数组中添加一个新对象。新对象只包含 action、label 和 placeholders 字段。
• result.push({ ... });: 如果组不存在，则创建一个新的组对象，包含 group 字段和一个 items 数组，并将当前项作为第一个元素放入 items 数组。
• return result;: 在每次回调函数执行结束时，必须返回 result，以便它作为下一次迭代的累加器。

注意事项与优化

1. split() 的优势：相较于 substring() 和 indexOf() 的组合，String.prototype.split() 方法在处理字符串分隔符时更为直观和健壮，尤其是在处理可能存在多个分隔符或分隔符位置不确定的情况时。

2. 性能考虑：在 reduce 内部使用 Array.prototype.find() 方法，其时间复杂度为 O(n)。如果 input 数组非常大，并且 result 数组也可能变得很大，那么 find 操作在每次迭代中都会遍历 result 数组，导致整体时间复杂度接近 O(n^2)。

   • 优化方案：对于性能要求极高的场景，可以引入一个临时的 Map 或普通对象来存储已处理的组，以 group 名称作为键，组对象本身作为值。这样，查找操作的时间复杂度可以降至 O(1)，从而将整体时间复杂度优化为 O(n)。

   const optimizedOutput = [];
   const groupMap = new Map(); // 用于快速查找已存在的组
   
   input.forEach(item => {
     const [group, action] = item.type.split("@");
   
     let existingGroup = groupMap.get(group);
   
     if (!existingGroup) {
       // 如果组不存在，创建新组并添加到 output 数组和 groupMap
       existingGroup = {
         group,
         items: []
       };
       optimizedOutput.push(existingGroup);
       groupMap.set(group, existingGroup);
     }
   
     // 将当前项推入对应组的 items 数组
     existingGroup.items.push({
       action,
       label: item.label,
       placeholders: item.placeholders
     });
   });
   
   console.log(optimizedOutput);

   这个优化后的方案通过 forEach 和一个 Map 实现了相同的逻辑，但查找效率更高。

总结

Array.prototype.reduce() 方法是 JavaScript 中进行数据转换和聚合的强大工具。通过本教程，我们学习了如何利用它将一个扁平的对象数组，根据其复合字段中的分隔符进行解析、分组和重构，生成一个结构化更清晰、更符合业务需求的嵌套数组。理解 reduce 的工作原理及其在不同场景下的应用，对于编写高效、可维护的 JavaScript 代码至关重要。同时，我们也探讨了在特定性能要求下，如何通过辅助数据结构（如 Map）进一步优化解决方案。