本教程详细阐述了如何利用 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免费学习笔记（深入）”；
目标数据结构示例：
[
{
"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 中一个非常强大的数组迭代器，它能够将数组中的所有元素归约为一个单一的值。在本例中，我们将利用它将原始数组归约为我们所需的嵌套数组结构。
核心思路
- 迭代：遍历 input 数组中的每一个对象。
- 解析：对于每个对象的 type 字段，使用 @ 作为分隔符将其拆分为 group 和 action。
-
查找与判断：在累加器（result 数组）中查找当前 group 是否已存在。
- 如果存在，则将当前项（转换为新的 action 格式）添加到该组的 items 数组中。
- 如果不存在，则创建一个新的组对象，并将其添加到 result 数组中，同时将当前项作为第一个元素放入新组的 items 数组。
- 累加：每次迭代都返回更新后的 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，以便它作为下一次迭代的累加器。
注意事项与优化
split() 的优势：相较于 substring() 和 indexOf() 的组合，String.prototype.split() 方法在处理字符串分隔符时更为直观和健壮，尤其是在处理可能存在多个分隔符或分隔符位置不确定的情况时。
-
性能考虑：在 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）进一步优化解决方案。
