JavaScript数据重塑：从扁平到层级结构

本教程详细介绍了如何使用javascript将一个扁平的对象数组转换为具有层级结构的分组数组。我们将原始对象中type字段的组合信息拆分为独立的group和action属性，并利用array.prototype.reduce方法高效地将数据按group进行分组，形成一个清晰、易于管理的多层级数据结构。

JavaScript对象数组的结构转换与分组

在前端开发中，我们经常需要处理来自后端或前端组件的各种数据结构。有时，原始数据可能是扁平化的，但为了更好地在UI中展示或进行后续处理，我们需要将其转换为更具层次感和逻辑分组的结构。本教程将以一个具体的示例，演示如何将一个包含复合类型字段的扁平对象数组，重塑为一个按特定字段分组的嵌套数组。

问题描述与目标结构

假设我们有一个初始的JavaScript对象数组，其结构如下：

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"]
}];

在这个数组中，每个对象都有一个type字段，它结合了“组名”和“操作名”，通过@符号连接。我们的目标是将其转换为以下嵌套结构：

[
  {
    "group": "group1",
    "items": [
      {
        "action": "action1",        
        "label": "labelA",
        "placeholders": ["b", "a", "r"]
      },
      {
        "action": "action2", // 注意：此处action应为action2
        "label": "labelB",
        "placeholders": ["x", "y", "z"]
      }
    ]
  },
  {
    "group": "group2",
    "items": [
      {
        "action": "action123",        
        "label": "labelC",
        "placeholders": ["a", "b", "c"]
      }
    ]
  }
]

可以看到，目标结构将原始数组按group字段进行了分组，每个组内部包含一个items数组，其中每个item都提取了原始对象的action、label和placeholders信息。

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

常见尝试与挑战

在处理此类问题时，开发者可能会尝试多种方法，例如使用Map对象进行初步分组。

// 初始尝试使用Map进行分组
let outputMap = new Map();
input.forEach(element => {
    const group = element.type.substring(0, element.type.indexOf('@'));
    // 正确的action提取应该是从 '@' 之后开始
    const action = element.type.substring(element.type.indexOf('@') + 1);

    if (!outputMap.has(group)) {
        outputMap.set(group, []); // 存储一个数组
    }
    // 存储提取后的action、label和placeholders
    outputMap.get(group).push({
        action: action, 
        label: element.label,
        placeholders: element.placeholders
    });
});

// console.log(Object.fromEntries(outputMap));
/* 
实际结果类似于：
{
  group1: [
    { action: 'action1', label: 'labelA', placeholders: [ 'b', 'a', 'r' ] },
    { action: 'action2', label: 'labelB', placeholders: [ 'x', 'y', 'z' ] }
  ],
  group2: [
    { action: 'action123', label: 'labelC', placeholders: [ 'a', 'b', 'c' ] }
  ]
}
*/

虽然Map可以有效地按group进行分组，但它直接返回的是一个Map对象或通过Object.fromEntries转换后的普通JavaScript对象。这种结构是{ groupName: [item1, item2], ... }，与我们期望的[{ group: 'groupName', items: [...] }, ...]数组结构仍有差异，需要额外的转换步骤才能达到目标。

使用 Array.prototype.reduce() 实现高效转换

JavaScript的Array.prototype.reduce()方法是处理此类数据聚合和转换任务的强大工具。它遍历数组中的每个元素，并使用一个回调函数将它们“归约”为一个单一的值（可以是数组、对象、数字等）。

TapNow

新一代AI视觉创作引擎

下载

下面是使用reduce方法实现上述数据转换的完整代码：

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((accumulator, currentItem) => {
  // 1. 从 type 字段中解构出 group 和 action
  // 使用 split('@') 比 substring 和 indexOf 更简洁高效
  const [group, action] = currentItem.type.split("@");

  // 2. 在累加器中查找当前 group 是否已存在
  // find 方法会返回第一个匹配的元素，如果不存在则返回 undefined
  const existingGroup = accumulator.find(groupItem => groupItem.group === group);

  // 3. 根据查找结果进行处理
  if (existingGroup) {
    // 如果 group 已存在，则将当前 item 的 action、label 和 placeholders 推入其 items 数组
    existingGroup.items.push({
      action, // 属性值简写，等同于 action: action
      label: currentItem.label,
      placeholders: currentItem.placeholders
    });
  } else {
    // 如果 group 不存在，则创建一个新的 group 对象并推入累加器
    accumulator.push({
      group, // 属性值简写
      items: [
        {
          action,
          label: currentItem.label,
          placeholders: currentItem.placeholders
        }
      ]
    });
  }

  // 4. 返回更新后的累加器，作为下一次迭代的初始值
  return accumulator;
}, []); // reduce 的第二个参数是初始值，这里是一个空数组，用于构建最终的输出数组

console.log(output);

代码详解

1. input.reduce((accumulator, currentItem) => { ... }, []);:

   • reduce方法接受两个参数：一个回调函数和一个可选的初始值。
   • accumulator（累加器）：在每次迭代中累积回调的返回值，最终成为reduce的最终结果。这里我们将其初始化为一个空数组[]，因为它将存储最终的分组数组。
   • currentItem：当前正在处理的数组元素（即input数组中的每个对象）。

2. const [group, action] = currentItem.type.split("@");:

   • 这是JavaScript的数组解构赋值。
   • currentItem.type.split("@")会根据@符号将字符串分割成一个包含两个元素的数组，例如"group1@action1"会变成["group1", "action1"]。
   • [group, action]则将这个数组的第一个元素赋值给group变量，第二个元素赋值给action变量。这种方式比使用substring和indexOf更加简洁和易读。

3. const existingGroup = accumulator.find(groupItem => groupItem.group === group);:

   • Array.prototype.find()方法用于在accumulator数组中查找第一个满足条件的元素。
   • 这里，我们检查accumulator中是否存在一个groupItem，其group属性与当前currentItem提取出的group相同。
   • 如果找到，existingGroup将是对该对象的引用；如果未找到，existingGroup将是undefined。

4. 条件分支 (if (existingGroup) { ... } else { ... }):

   • 如果existingGroup存在：这意味着我们已经为这个group创建了一个分组对象。我们只需将当前currentItem的相关信息（action、label、placeholders）提取出来，作为一个新的对象推入existingGroup.items数组中。
   • 如果existingGroup不存在：这意味着这是我们第一次遇到这个group。我们需要创建一个新的分组对象，包含group属性和items数组。items数组的初始值就是当前currentItem提取出的信息。

5. return accumulator;:

   • 在每次迭代结束时，回调函数必须返回更新后的accumulator。这个返回值将作为下一次迭代的accumulator参数。

注意事项与最佳实践

• 数据结构一致性：确保type字段始终包含@符号，否则split操作可能不会按预期工作，导致group或action为undefined或整个type字符串。在实际应用中，可能需要添加错误处理或数据验证（例如，使用可选链操作符 ?. 或在 split 后检查数组长度）。
• 性能考量：Array.prototype.find()在每次迭代中都会遍历accumulator数组。对于非常大的数据集（例如，input数组有数万个元素），这可能导致性能问题（理论上复杂度接近 O(N^2)）。如果input数组非常庞大，可以考虑先将accumulator转换为一个Map