从嵌套的分类数据中提取指定ID的子节点并扁平化：JavaScript教程-js教程-PHP中文网

从嵌套的分类数据中提取指定ID的子节点并扁平化：JavaScript教程

碧海醫心

发布： 2025-08-23 19:42:29

原创

439人浏览过

从嵌套的分类数据中提取指定id的子节点并扁平化：javascript教程

从嵌套的分类数据中提取指定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:
// []

登录后复制