本文旨在提供一种高效且避免使用 for、foreach 和 while 循环的方法，从深度嵌套的 JavaScript 数组中提取特定 ID 的直接子元素。通过迭代方法，我们能够根据传入的 ID 数组，返回相应的子元素，或者在未传入 ID 时，返回顶层元素的直接子元素。同时，本文还提供了 typescript 类型定义，以增强代码的可读性和可维护性。
在处理具有多层嵌套结构的数据时，提取特定层级的子元素是一个常见的需求。传统的循环方式虽然可以实现，但在处理深度嵌套的数据时，代码可读性和效率都会受到影响。本文介绍一种使用迭代方法，结合栈数据结构，从深度嵌套的数组中提取特定 ID 的直接子元素，并避免使用传统的 for、foreach 和 while 循环。
算法思路
该算法的核心思想是使用栈来模拟深度优先搜索（DFS）的过程，从而遍历整个嵌套数组。
- 处理 ID 数组： 首先，判断是否传入了需要筛选的 ID 数组。
- 如果传入了 ID 数组，则将顶层元素压入栈中。
- 如果未传入 ID 数组，则直接返回顶层元素及其直接子元素的精简信息。
- 迭代栈： 当栈不为空时，执行以下操作：
- 从栈顶弹出一个元素。
- 判断当前元素的 ID 是否在传入的 ID 数组中。
- 如果在，则提取当前元素的直接子元素，并将其精简信息添加到结果数组中。
- 将当前元素的子元素压入栈中，继续下一轮迭代。
- 返回结果： 最终，返回包含所有符合条件的子元素的数组。
代码实现（TypeScript）
首先，定义 Category 的 TypeScript 类型，增强代码可读性和可维护性。
立即学习“Java免费学习笔记（深入）”；
type Category = { name: string; id: string; count: string; depth: string; children: Category[]; };
接下来是核心函数 getCategoriesChildren 的实现：
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, });
使用示例
const data: Category[] = [ { 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); // 输出: // [ // { name: 'Engine and Brakes', id: '344', count: '1' }, // { name: 'SpeedBike', id: '4', count: '12' } // ] // 获取顶层元素及其直接子元素 const children2 = getCategoriesChildren([], data); console.log(children2); // 输出: // [ // { 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 类型定义可以确保代码的类型安全，避免潜在的运行时错误。
- 性能： 虽然避免了传统的循环，但在处理非常深层和庞大的数据时，迭代方法仍然可能存在性能瓶颈。可以考虑使用 Web Workers 等技术进行优化。
- 可维护性： 清晰的代码结构和注释可以提高代码的可维护性，方便后续的修改和扩展。
总结
本文介绍了一种使用迭代方法从深度嵌套的 JavaScript 数组中提取特定 ID 的直接子元素的方案。该方案避免了传统的循环，提高了代码的可读性和可维护性。同时，使用 TypeScript 类型定义可以增强代码的类型安全。在实际应用中，需要根据具体的数据结构和性能要求选择合适的算法。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
