本教程详细介绍了如何使用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()方法是处理此类数据聚合和转换任务的强大工具。它遍历数组中的每个元素，并使用一个回调函数将它们“归约”为一个单一的值（可以是数组、对象、数字等）。
下面是使用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);代码详解
-
input.reduce((accumulator, currentItem) => { ... }, []);:
- reduce方法接受两个参数：一个回调函数和一个可选的初始值。
- accumulator（累加器）：在每次迭代中累积回调的返回值，最终成为reduce的最终结果。这里我们将其初始化为一个空数组[]，因为它将存储最终的分组数组。
- currentItem：当前正在处理的数组元素（即input数组中的每个对象）。
-
const [group, action] = currentItem.type.split("@");:
- 这是JavaScript的数组解构赋值。
- currentItem.type.split("@")会根据@符号将字符串分割成一个包含两个元素的数组，例如"group1@action1"会变成["group1", "action1"]。
- [group, action]则将这个数组的第一个元素赋值给group变量，第二个元素赋值给action变量。这种方式比使用substring和indexOf更加简洁和易读。
-
const existingGroup = accumulator.find(groupItem => groupItem.group === group);:
- Array.prototype.find()方法用于在accumulator数组中查找第一个满足条件的元素。
- 这里，我们检查accumulator中是否存在一个groupItem，其group属性与当前currentItem提取出的group相同。
- 如果找到，existingGroup将是对该对象的引用；如果未找到，existingGroup将是undefined。
-
条件分支 (if (existingGroup) { ... } else { ... }):
- 如果existingGroup存在：这意味着我们已经为这个group创建了一个分组对象。我们只需将当前currentItem的相关信息（action、label、placeholders）提取出来，作为一个新的对象推入existingGroup.items数组中。
- 如果existingGroup不存在：这意味着这是我们第一次遇到这个group。我们需要创建一个新的分组对象，包含group属性和items数组。items数组的初始值就是当前currentItem提取出的信息。
-
return accumulator;:
- 在每次迭代结束时，回调函数必须返回更新后的accumulator。这个返回值将作为下一次迭代的accumulator参数。
注意事项与最佳实践
- 数据结构一致性：确保type字段始终包含@符号，否则split操作可能不会按预期工作，导致group或action为undefined或整个type字符串。在实际应用中，可能需要添加错误处理或数据验证（例如，使用可选链操作符 ?. 或在 split 后检查数组长度）。
- 性能考量：Array.prototype.find()在每次迭代中都会遍历accumulator数组。对于非常大的数据集（例如，input数组有数万个元素），这可能导致性能问题（理论上复杂度接近 O(N^2)）。如果input数组非常庞大，可以考虑先将accumulator转换为一个Map
