本文档提供了一个 JavaScript教程，用于从嵌套的分类数据结构中提取特定分类ID的所有子项，并将结果扁平化为一个数组。它涵盖了处理不同场景的逻辑，包括指定分类ID和未指定分类ID的情况，并提供了可复用的代码示例。
场景描述
假设我们有一个嵌套的分类数据结构，每个分类都有 id、name、count 和 children 属性。children 属性是一个包含子分类的数组，子分类也具有相同的结构。我们的目标是编写一个 JavaScript 函数，该函数能够：
- 接收一个分类 ID 数组作为输入。
- 如果提供了分类 ID 数组，则返回所有指定分类 ID 的子项，并将结果扁平化为一个数组。
- 如果没有提供分类 ID 数组，则返回所有顶级分类及其直接子项。
- 如果提供的分类 ID 没有子项，则返回一个空数组。
- 避免使用 for、foreach 和 while 循环。
实现方法
我们可以使用递归和栈数据结构来实现这个功能，同时避免使用 for、foreach 和 while 循环。
代码示例（typescript）
立即学习“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<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: (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; }; // 示例数据 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: [] } ] } ]; // 示例用法 const categoryIds = ['22', '3']; const children = getCategoriesChildren(categoryIds, data); console.log(children); const noCategoryIds = []; const defaultChildren = getCategoriesChildren(noCategoryIds, data); console.log(defaultChildren);
代码解释：
- Category 接口： 定义了分类对象的结构。
- mapCategory 函数： 用于从 Category 对象中提取 id、count 和 name 属性，创建一个新的对象。
- getCategoriesChildren 函数：
- 接收一个分类 ID 数组 categoryIds 和一个分类数组 categories 作为输入。
- 如果 categoryIds 为空，则返回所有顶级分类及其直接子项。
- 如果 categoryIds 不为空，则使用栈数据结构来遍历分类树，找到所有指定分类 ID 的子项。
- stack 存储 categories 与附加的 isDesired?: boolean 属性，用于指示该 category 是否为指定 ID 的子代。
- 如果 category 的 id 在 categoryIds 中，则将其 children 压入栈中，并设置 isDesired: true。
- 当 category id 在 categoryIds 中或 category.isDesired 为 true 时，才将其 children 加入 foundChildren。
- 示例数据和用法： 展示了如何使用 getCategoriesChildren 函数。
注意事项
- 此方法使用栈数据结构进行深度优先搜索，适用于深度嵌套的分类数据。
- 代码使用 TypeScript 编写，可以轻松转换为 JavaScript。
- mapCategory 函数用于提取必要的属性，可以根据实际需求进行修改。
- 可以根据需要修改代码以处理其他场景，例如处理循环引用或限制搜索深度。
总结
本文提供了一个使用 JavaScript 查找并扁平化特定分类 ID 的子项的教程。通过使用栈数据结构和递归，我们可以避免使用 for、foreach 和 while 循环，从而使代码更加简洁和易于理解。 此方法适用于处理深度嵌套的分类数据，并且可以根据实际需求进行修改。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
