从深层嵌套数组中提取指定子元素的 JavaScript 教程-js教程-PHP中文网

从深层嵌套数组中提取指定子元素的 JavaScript 教程

聖光之護

发布： 2025-08-16 19:04:14

原创

363人浏览过

从深层嵌套数组中提取指定子元素的 javascript 教程

本文旨在提供一种高效的 JavaScript 方法，用于从深度嵌套的数组结构中提取特定 ID 的子元素。通过迭代而非递归的方式，避免了潜在的栈溢出风险，并提供了清晰的代码示例和用法说明，帮助开发者轻松处理复杂的数据结构。

问题背景

在处理具有层级关系的数据时，经常会遇到深层嵌套的数组结构。例如，一个表示商品分类的数据结构，每一级分类都包含子分类，而子分类又可以继续包含更深层的子分类。在这种情况下，如果需要根据特定的分类 ID 提取其直接子分类，传统的 for 循环或递归方法可能效率较低，或者存在栈溢出的风险。

解决方案：迭代方法

为了解决上述问题，可以采用一种迭代的方法，利用栈数据结构来遍历深层嵌套的数组。这种方法避免了递归调用，从而消除了栈溢出的风险，并且通常比递归方法更高效。

算法步骤：

立即学习“Java免费学习笔记（深入）”；

初始化： 如果提供了分类 ID 列表，则将顶层分类放入栈中。否则，直接处理顶层分类及其子分类。
迭代： 当栈不为空时，循环执行以下操作：
- 从栈中弹出一个分类。
- 如果该分类的 ID 存在于提供的分类 ID 列表中，则提取其子分类的指定属性（例如，name、id 和 count）。
- 将该分类的子分类压入栈中，以便后续处理。
结果： 返回提取到的子分类列表。

代码示例 (TypeScript):

type Category = {
  name: string;
  id: string;
  count: string;
  depth: string;
  children: Category[];
};

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 = [...categories];

  while (stack.length) {
    const category = stack.pop();
    if (!category) continue;
    if (categoryIds.includes(category.id)) {
      foundChildren.push(
        ...category.children.map((childCategory) => ({
          name: childCategory.name,
          id: childCategory.id,
          count: childCategory.count,
        })),
      );
    }
    stack.push(...category.children);
  }

  return foundChildren;
};

// Helper function to map Category to desired properties
const mapCategory = (category: Category): Pick<Category, 'id' | 'count' | 'name'> => ({
    name: category.name,
    id: category.id,
    count: category.count
});

登录后复制

用法示例:

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

假设有以下数据结构：

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 为 "101" 和 "3" 的分类的子分类：

const children = getCategoriesChildren(['101', '3'], data);
console.log(children);
// Output:
// [
//   { name: 'Engine and Brakes', id: '344', count: '1' },
//   { name: 'SpeedBike', id: '4', count: '12' }
// ]

登录后复制

如果未提供分类 ID，则提取所有顶层分类及其子分类：

const allCategories = getCategoriesChildren([], data);
console.log(allCategories);
// 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' }
// ]

登录后复制

注意事项: