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

本文档提供了一个 JavaScript教程，用于从嵌套的分类数据结构中提取特定分类ID的所有子项，并将结果扁平化为一个数组。它涵盖了处理不同场景的逻辑，包括指定分类ID和未指定分类ID的情况，并提供了可复用的代码示例。

场景描述

假设我们有一个嵌套的分类数据结构，每个分类都有 id、name、count 和 children 属性。children 属性是一个包含子分类的数组，子分类也具有相同的结构。我们的目标是编写一个 JavaScript 函数，该函数能够：

1. 接收一个分类 ID 数组作为输入。
2. 如果提供了分类 ID 数组，则返回所有指定分类 ID 的子项，并将结果扁平化为一个数组。
3. 如果没有提供分类 ID 数组，则返回所有顶级分类及其直接子项。
4. 如果提供的分类 ID 没有子项，则返回一个空数组。
5. 避免使用 for、foreach 和 while 循环。

实现方法

我们可以使用递归和栈数据结构来实现这个功能，同时避免使用 for、foreach 和 while 循环。

代码示例（TypeScript）

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);

代码解释：

1. Category 接口： 定义了分类对象的结构。
2. mapCategory 函数： 用于从 Category 对象中提取 id、count 和 name 属性，创建一个新的对象。
3. 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。
4. 示例数据和用法： 展示了如何使用 getCategoriesChildren 函数。

注意事项

• 此方法使用栈数据结构进行深度优先搜索，适用于深度嵌套的分类数据。
• 代码使用 TypeScript 编写，可以轻松转换为 JavaScript。
• mapCategory 函数用于提取必要的属性，可以根据实际需求进行修改。
• 可以根据需要修改代码以处理其他场景，例如处理循环引用或限制搜索深度。

总结

本文提供了一个使用 JavaScript 查找并扁平化特定分类 ID 的子项的教程。通过使用栈数据结构和递归，我们可以避免使用 for、foreach 和 while 循环，从而使代码更加简洁和易于理解。 此方法适用于处理深度嵌套的分类数据，并且可以根据实际需求进行修改。

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南