本文档提供了一个 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[] = []; if (categoryIds.length === 0) { return categories.reduce<Pick[]>( (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 循环，从而使代码更加简洁和易于理解。 此方法适用于处理深度嵌套的分类数据，并且可以根据实际需求进行修改。
以上就是使用 JavaScript 查找并扁平化特定分类 ID 的子项的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1517400.html
微信扫一扫 
支付宝扫一扫 
