本教程旨在指导开发者如何使用 JavaScript 从深度嵌套的分类数据中，根据给定的分类 ID 列表提取所有子项，并将结果扁平化为一个数组。文章将提供详细的代码示例和解释，并涵盖了处理空分类 ID 列表的情况，以及如何避免使用 for、forEach 和 while 循环。
在处理具有嵌套结构的分类数据时，经常需要根据特定的分类 ID 提取其所有子项。本教程将介绍一种使用 JavaScript 实现此功能的有效方法，并提供详细的代码示例和解释。
数据结构
首先，定义我们要处理的数据结构。假设我们有如下的分类数据：
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: [] } ] }];
实现方法
我们将使用栈（Stack）数据结构和一些函数式编程技巧（如 map 和 reduce）来实现目标，避免使用 for、forEach 和 while 循环。
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;};
代码解释：
立即学习“Java免费学习笔记（深入）”；
mapCategory 函数： 用于将 Category 对象映射到包含 name、id 和 count 属性的精简对象。getCategoriesChildren 函数：接受 categoryIds（要查找的分类 ID 数组）和 categories（分类数据）作为输入。如果 categoryIds 为空，则返回包含所有父级和直接子级的扁平化数组。使用 reduce 函数遍历 categories 数组，并将每个分类及其子项添加到累加器中。如果 categoryIds 不为空，则使用栈数据结构来遍历分类数据。创建一个 stack 数组，并将初始的 categories 数组复制到其中。使用 while 循环遍历 stack 数组，直到它为空。在每次迭代中，从 stack 数组中弹出一个分类。检查当前分类的 ID 是否在 categoryIds 数组中，或者它是否是所需分类的子项（category.isDesired 为 true）。如果是，则将当前分类的子项添加到 foundChildren 数组中。将当前分类的子项添加到 stack 数组中，如果当前分类是所需分类，则将子项的 isDesired 属性设置为 true。最后，返回 foundChildren 数组。
使用示例：
const categoryIds1 = ['22', '3'];const result1 = getCategoriesChildren(categoryIds1, data);console.log(result1);const categoryIds2: string[] = [];const result2 = getCategoriesChildren(categoryIds2, data);console.log(result2);const categoryIds3 = ['999']; // 不存在的 IDconst result3 = getCategoriesChildren(categoryIds3, data);console.log(result3);
注意事项
该方法使用栈数据结构进行深度优先搜索，可以处理任意深度的嵌套数据。isDesired 属性用于标记所需分类的子项，避免重复搜索。mapCategory 函数用于提取所需的属性，可以根据实际需求进行修改。
总结
本教程介绍了一种使用 JavaScript 从深度嵌套的分类数据中提取指定分类 ID 的所有子项并扁平化的方法。该方法使用栈数据结构和函数式编程技巧，避免使用 for、forEach 和 while 循环，提高了代码的可读性和可维护性。通过理解和应用本教程中的代码示例，您可以轻松地处理复杂的分类数据，并提取所需的信息。
以上就是从嵌套数据中提取指定分类 ID 的所有子项并扁平化：JavaScript 教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/95368.html
微信扫一扫 
支付宝扫一扫 
