从嵌套的分类数据中提取指定ID的子节点并扁平化：JavaScript教程
本文档详细介绍了如何使用JavaScript从深度嵌套的分类数据中提取特定ID的子节点，并将结果扁平化为一个数组。我们提供了一个高效的算法，避免了传统的循环结构，而是采用栈数据结构和条件判断，以实现目标。同时，我们还讨论了在没有指定ID时返回父节点和直接子节点，以及在指定ID没有子节点时返回空数组的策略。
在处理具有层级结构的分类数据时，经常需要根据特定的分类ID提取其所有子节点，并将这些节点扁平化到一个数组中。本教程将介绍一种使用JavaScript实现此功能的有效方法，该方法避免了使用for、forEach和while等传统循环结构，而是采用栈数据结构，提供了一种更简洁和可读性更高的解决方案。
数据结构
首先，我们假设有如下的数据结构，表示分类信息：
interface Category {
name: string;
id: string;
count: string;
depth: string;
children: Category[];
}
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子节点并扁平化的函数：
立即学习“Java免费学习笔记（深入）”；
interface Category {
name: string;
id: string;
count: string;
depth: string;
children: Category[];
}
const mapCategory = (category: Category) => ({
name: category.name,
id: category.id,
count: category.count,
});
const getCategoriesChildren = (
categoryIds: Category['id'][],
categories: Category[],
) => {
const foundChildren: Pick[] = [];
if (categoryIds.length === 0) {
return categories.reduce[]>(
(acc, category) => {
acc.push(mapCategory(category), ...category.children.map(mapCategory));
return acc;
},
[],
);
}
const stack: (Category & { isDesired?: boolean })[] = [...categories];
while (stack.length) {
const category = stack.pop();
if (!category) continue;
const isDesiredCategory =
categoryIds.includes(category.id) || category.isDesired;
if (isDesiredCategory) {
foundChildren.push(...category.children.map(mapCategory));
}
stack.push(
...(isDesiredCategory
? category.children.map((child) => ({ ...child, isDesired: true }))
: category.children),
);
}
return foundChildren;
}; 代码解释：
- mapCategory 函数: 用于提取每个分类的 name、id 和 count 属性，创建一个新的对象。
-
getCategoriesChildren 函数:
- 接收两个参数：categoryIds (要提取子节点的分类ID数组) 和 categories (分类数据数组)。
- 如果 categoryIds 为空，则返回所有父节点和直接子节点。使用 reduce 方法遍历 categories 数组，将每个分类及其直接子节点映射到新的对象并添加到结果数组中。
- 如果 categoryIds 不为空，则使用栈数据结构来遍历分类树。
- 创建一个栈 stack，并将 categories 数组中的所有分类添加到栈中。
- 使用 while 循环，只要栈不为空，就从栈中弹出一个分类。
- 检查当前分类的 id 是否在 categoryIds 数组中，或者该分类是否是目标分类的后代节点（通过 isDesired 属性判断）。
- 如果是目标分类或其后代节点，则将其子节点映射到新的对象并添加到 foundChildren 数组中。
- 将当前分类的子节点添加到栈中，如果当前分类是目标分类，则将其子节点的 isDesired 属性设置为 true，表示这些子节点是目标分类的后代节点。
- 最后，返回 foundChildren 数组。
使用示例
const categoryIds1 = ['22', '3'];
const result1 = getCategoriesChildren(categoryIds1, data);
console.log(result1);
// Expected Output:
// [
// { name: "Engine", id: "101", count: "1" },
// { name: "Engine and Brakes", id: "344", count: "1" },
// { name: "SpeedBike", id: "4", count: "12" }
// ]
const categoryIds2: string[] = [];
const result2 = getCategoriesChildren(categoryIds2, data);
console.log(result2);
// 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" }
// ]
const categoryIds3 = ['4'];
const result3 = getCategoriesChildren(categoryIds3, data);
console.log(result3);
// Expected Output:
// []注意事项
- 该方法使用了栈数据结构来避免递归调用，从而提高了性能。
- isDesired 属性用于标记目标分类的后代节点，避免重复遍历。
- 如果需要处理非常大的数据集，可以考虑使用Web Workers来将计算任务放在后台线程中执行，以避免阻塞主线程。
总结
本教程介绍了一种使用JavaScript从深度嵌套的分类数据中提取特定ID的子节点，并将结果扁平化为一个数组的有效方法。该方法避免了传统的循环结构，而是采用栈数据结构，提供了一种更简洁和可读性更高的解决方案。 通过理解和应用本教程中的代码，你可以更有效地处理具有层级结构的分类数据，并提取所需的信息。
