本文旨在提供一种高效且避免使用 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 类型定义可以增强代码的类型安全。在实际应用中，需要根据具体的数据结构和性能要求选择合适的算法。
