本文档提供了一个 JavaScript 教程，用于从深度嵌套的分类数据中提取特定分类 ID 的所有子项，并将结果扁平化为一个数组。该方法避免了使用 for、foreach 和 while 循环，而是采用栈结构和 map 等函数式编程技巧，提供了一种高效且可读性强的解决方案。同时，处理了未传递分类 ID 和传递的 ID 无子项等情况。
本文将介绍如何使用 JavaScript 从一个深度嵌套的分类数据结构中，根据给定的分类 ID 列表，提取这些 ID 对应的所有子项，并将结果扁平化为一个一维数组。我们将避免使用传统的 for、foreach 和 while 循环，而是采用更现代的函数式编程方法，提高代码的可读性和可维护性。
数据结构
首先，我们定义一个分类数据结构 Category，它包含 name、id、count 和 children 属性。children 属性是一个 Category 类型的数组，表示该分类的子分类。
interface Category {
name: string;
id: string;
count: string;
depth: string;
children: Category[];
}例如：
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: []
}
]
}
];实现方法
我们的目标是编写一个函数 getCategoriesChildren，它接收一个分类 ID 数组 categoryIds 和一个分类数据数组 categories 作为输入，并返回一个包含所有指定分类 ID 的子项的扁平化数组。
立即学习“Java免费学习笔记（深入）”；
该函数的核心思路是使用栈来模拟深度优先搜索（DFS）。我们将初始的分类数据压入栈中，然后不断从栈中弹出元素，并检查该元素是否是目标分类的子项。如果是，则将其子项也压入栈中，继续搜索。
为了避免使用 for、foreach 和 while 循环，我们将使用 map 等函数式编程技巧来处理数组。
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 函数: 该函数用于从 Category 对象中提取 name、id 和 count 属性，创建一个新的对象。这是为了确保返回的子项数组只包含我们需要的属性。
-
getCategoriesChildren 函数:
- 参数: 接收一个分类 ID 数组 categoryIds 和一个分类数据数组 categories 作为输入。
- foundChildren 数组: 用于存储找到的子项。
- 处理 categoryIds 为空的情况: 如果 categoryIds 为空，则返回所有父分类和直接子分类。这里使用了 reduce 方法将 categories 数组转换为一个包含父分类和直接子分类的扁平化数组。
- 初始化栈: 创建一个栈 stack，并将 categories 数组中的所有元素压入栈中。 每个元素除了 Category 属性外，还包含一个 isDesired 属性，用于标记该分类是否是目标分类的子项。
-
循环处理栈中的元素:
- 从栈中弹出一个元素 category。
- 判断该元素是否是目标分类的子项：如果 categoryIds 包含该元素的 id，或者该元素的 isDesired 属性为 true，则认为该元素是目标分类的子项。
- 如果该元素是目标分类的子项，则将其子项添加到 foundChildren 数组中。
- 将该元素的子项压入栈中。如果该元素是目标分类的子项，则将其子项的 isDesired 属性设置为 true。
- 返回结果: 返回 foundChildren 数组。
使用示例
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: []
}
]
}
];
const categoryIds = ['22', '3'];
const children = getCategoriesChildren(categoryIds, data);
console.log(children);
// Expected Output:
// [
// { name: 'Engine', id: '101', count: '1' },
// { name: 'Engine and Brakes', id: '344', count: '1' },
// { name: 'SpeedBike', id: '4', count: '12' }
// ]
const noCategoryIds = [];
const parentAndChildren = getCategoriesChildren(noCategoryIds, data);
console.log(parentAndChildren);
// 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 emptyCategoryIds = ['999'];
const emptyChildren = getCategoriesChildren(emptyCategoryIds, data);
console.log(emptyChildren);
// Expected Output:
// []总结
本文介绍了一种使用 JavaScript 从深度嵌套的分类数据结构中提取指定分类 ID 的所有子项，并将结果扁平化为一个数组的方法。该方法避免了使用传统的 for、foreach 和 while 循环，而是采用栈结构和 map 等函数式编程技巧，提供了一种高效且可读性强的解决方案。该方法可以应用于各种需要处理嵌套数据结构的场景，例如：网站导航、商品分类、组织结构等。
