本文介绍了在 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<Category, 'id' | 'count' | 'name'>[] => { const foundChildren: Pick<Category, 'id' | 'count' | 'name'>[] = []; if (categoryIds.length === 0) { return categories.reduce<Pick<Category, 'id' | 'count' | 'name'>[]>( (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<Category, 'id' | 'count' | 'name'> => ({ 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 列表，提取特定节点的直接子节点。该方法使用迭代方式，避免了递归可能导致的栈溢出问题，并提供了清晰的代码示例和使用说明。通过学习本文，可以更好地处理复杂的数据结构，提高开发效率。
评论（已关闭）
评论已关闭