使用 JavaScript 查找并扁平化特定分类 ID 的子项-js教程-PHP中文网

使用 JavaScript 查找并扁平化特定分类 ID 的子项

DDD

发布： 2025-08-23 20:26:01

原创

443人浏览过

使用 javascript 查找并扁平化特定分类 id 的子项

本文档提供了一个 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 函数。