从嵌套的分类数据中提取指定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<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; };
代码解释：
- 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的子节点，并将结果扁平化为一个数组的有效方法。该方法避免了传统的循环结构，而是采用栈数据结构，提供了一种更简洁和可读性更高的解决方案。 通过理解和应用本教程中的代码，你可以更有效地处理具有层级结构的分类数据，并提取所需的信息。
评论（已关闭）
评论已关闭