本文介绍了在 JavaScript 中处理深度嵌套数组，并根据指定的 ID 列表提取子元素的方法。通过迭代方式，避免了递归可能导致的栈溢出问题，并提供了清晰的代码示例和使用说明，帮助开发者高效地处理复杂的数据结构。无论是否提供 ID 列表，都能返回期望的子元素数组。
简介
在 JavaScript 开发中，经常会遇到需要处理嵌套较深的数组结构的情况。例如，树形结构的组织数据，每个节点可能包含子节点，而子节点又可能包含更深层次的子节点。本文将介绍一种高效的方法，用于从这种嵌套数组中，根据给定的 ID 列表，提取特定节点的直接子节点。
算法思路
核心思路是采用迭代的方式遍历嵌套数组，避免使用递归，从而避免了潜在的栈溢出风险，尤其是在处理深度非常大的嵌套结构时。
-
判断是否提供了 ID 列表：
立即学习“Java免费学习笔记（深入）”；
- 如果提供了 ID 列表，则进入特定的子节点提取逻辑。
- 如果没有提供 ID 列表，则返回所有顶层节点及其直接子节点。
-
提取特定子节点（当提供了 ID 列表时）：
- 使用栈（Stack）来辅助迭代。将顶层节点放入栈中。
- 循环遍历栈，直到栈为空。
- 每次从栈中弹出一个节点，检查其 ID 是否在给定的 ID 列表中。
- 如果节点的 ID 在 ID 列表中，则提取该节点的直接子节点，并将这些子节点添加到结果数组中。
- 将当前节点的所有子节点压入栈中，以便后续处理。
-
提取顶层节点及其子节点（当没有提供 ID 列表时）：
- 遍历顶层节点。
- 将每个顶层节点及其直接子节点添加到结果数组中。
代码实现
type Category = {
name: string;
id: string;
count: string;
depth: string;
children: Category[];
};
const getCategoriesChildren = (
categoryIds: Category['id'][],
categories: Category[],
): Pick[] => {
const foundChildren: Pick[] = [];
if (categoryIds.length === 0) {
return categories.reduce[]>(
(acc, category) => {
acc.push(mapCategory(category), ...category.children.map(mapCategory));
return acc;
},
[],
);
}
const stack = [...categories];
while (stack.length) {
const category = stack.pop();
if (!category) continue;
if (categoryIds.includes(category.id)) {
foundChildren.push(
...category.children.map((childCategory) => ({
name: childCategory.name,
id: childCategory.id,
count: childCategory.count,
})),
);
}
stack.push(...category.children);
}
return foundChildren;
};
const mapCategory = (category: Category): Pick => ({
name: category.name,
id: category.id,
count: category.count,
}); 代码解释：
- Category 类型定义了节点的结构，包括 name、id、count、depth 和 children 属性。
- getCategoriesChildren 函数接收两个参数：categoryIds（ID 列表）和 categories（顶层节点数组）。
- 如果没有提供 categoryIds，则使用 reduce 方法遍历 categories 数组，将每个节点及其子节点映射为包含 name、id 和 count 属性的对象，并将它们添加到结果数组中。
- 如果提供了 categoryIds，则使用栈 stack 来迭代遍历嵌套数组。
- 在 while 循环中，从栈中弹出一个节点，检查其 ID 是否在 categoryIds 列表中。
- 如果在列表中，则提取该节点的子节点，并将它们添加到 foundChildren 数组中。
- 无论节点的 ID 是否在列表中，都将其子节点压入栈中，以便后续处理。
使用示例
const data = [
{
name: "Car",
id: "19",
count: "20",
depth: "1",
children: [
{
name: "Wheel",
id: "22",
count: "3",
depth: "2",
children: [
{
name: "Engine",
id: "101",
count: "1",
depth: "3",
children: [
{
name: "Engine and Brakes",
id: "344",
count: "1",
depth: "4",
children: []
}
]
}
]
}
]
},
{
name: "Bike",
id: "3",
count: "12",
depth: "1",
children: [
{
name: "SpeedBike",
id: "4",
count: "12",
depth: "2",
children: []
}
]
}
];
// 获取 ID 为 '101' 和 '3' 的节点的子节点
const children1 = getCategoriesChildren(['101', '3'], data);
console.log(children1);
// Expected Output:
// [
// { name: 'Engine and Brakes', id: '344', count: '1' },
// { name: 'SpeedBike', id: '4', count: '12' }
// ]
// 获取所有顶层节点及其子节点
const children2 = getCategoriesChildren([], data);
console.log(children2);
// Expected Output:
// [
// { name: 'Car', id: '19', count: '20' },
// { name: 'Wheel', id: '22', count: '3' },
// { name: 'Bike', id: '3', count: '12' },
// { name: 'SpeedBike', id: '4', count: '12' }
// ]注意事项
- 该方法使用迭代方式，避免了递归可能导致的栈溢出问题，适用于处理深度较大的嵌套数组。
- 代码使用了 TypeScript，可以提供更好的类型检查和代码提示。如果使用 JavaScript，可以移除类型定义。
- 可以根据实际需求修改代码，例如，提取节点的其他属性，或者修改提取子节点的条件。
总结
本文介绍了一种高效的方法，用于从 JavaScript 的深度嵌套数组中，根据给定的 ID 列表，提取特定节点的直接子节点。该方法使用迭代方式，避免了递归可能导致的栈溢出问题，并提供了清晰的代码示例和使用说明。通过学习本文，可以更好地处理复杂的数据结构，提高开发效率。
