JavaScript 深度嵌套数组中获取指定子元素的实用指南

聖光之護

发布时间：2025-08-16 19:26:22

271人浏览过

来源于php中文网

原创

javascript 深度嵌套数组中获取指定子元素的实用指南

第一段引用上面的摘要：

本文旨在提供一种高效且易于理解的方法，用于在 JavaScript 中处理深度嵌套的数组结构，并根据指定的 ID 列表提取目标元素的子元素。通过迭代而非递归的方式，避免了潜在的栈溢出风险，并提供了清晰的代码示例和详细的步骤说明。无论您是处理复杂的数据结构还是构建动态的用户界面，本文都将为您提供实用的解决方案。

处理深度嵌套数组：高效获取指定子元素

在实际开发中，我们经常会遇到需要处理深度嵌套的数组结构的情况，例如树形数据、组织结构等。本文将介绍一种使用 JavaScript 从深度嵌套数组中获取指定子元素的高效方法，避免使用 for、foreach 和 while 循环，并提供完整的代码示例。

问题描述

假设我们有如下的深度嵌套数组结构，表示一系列的分类及其子分类：

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

const data = [
  {
    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']，获取这些 ID 对应的直接子元素，并提取指定的属性（例如 name、id、count）。
如果没有传入任何分类 ID，则默认返回第一层的所有分类及其直接子元素，并提取指定的属性。
如果传入的分类 ID 没有子元素，则返回一个空数组。

解决方案：迭代方法

为了避免递归可能导致的栈溢出问题，我们采用迭代的方法来解决这个问题。

算法思路：

Otter.ai

一个自动的会议记录和笔记工具，会议内容生成和实时转录

下载

如果提供了分类 ID 列表：
- 初始化一个栈，并将第一层的所有分类放入栈中。
- 当栈不为空时：
  - 从栈中弹出一个分类。
  - 如果该分类的 ID 包含在目标 ID 列表中：
    - 遍历该分类的子元素，提取指定的属性，并将结果添加到结果数组中。
  - 将该分类的子元素添加到栈中，以便后续处理。
如果没有提供分类 ID 列表：
- 遍历第一层的所有分类。
- 提取每个分类及其子元素的指定属性，并将结果添加到结果数组中。

代码实现（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'>[] = [];

  const mapCategory = (category: Category): Pick<Category, 'id' | 'count' | 'name'> => ({
      name: category.name,
      id: category.id,
      count: category.count,
  });

  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) => mapCategory(childCategory)),
      );
    }
    stack.push(...category.children);
  }

  return foundChildren;
};

代码解释：

Category 类型定义了分类对象的结构。
getCategoriesChildren 函数接收两个参数：categoryIds（目标 ID 列表）和 categories（分类数据）。
foundChildren 数组用于存储找到的子元素。
如果没有提供 categoryIds，则使用 reduce 方法遍历第一层分类，提取每个分类及其子元素的属性，并添加到 foundChildren 数组中。
如果提供了 categoryIds，则使用栈来迭代遍历整个嵌套结构。
stack.pop() 从栈中弹出一个分类。
如果该分类的 ID 包含在 categoryIds 中，则遍历其子元素，提取属性，并添加到 foundChildren 数组中。
将该分类的子元素添加到栈中，以便后续处理。

使用示例：

// 获取 ID 为 '101' 和 '3' 的分类的子元素
console.log(getCategoriesChildren(['101', '3'], data));

// 获取所有第一层分类及其子元素
console.log(getCategoriesChildren([], data));