JavaScript 中获取嵌套数组的子元素-js教程-PHP中文网

JavaScript 中获取嵌套数组的子元素

聖光之護

发布： 2025-08-16 18:22:14

原创

955人浏览过

javascript 中获取嵌套数组的子元素

本文介绍了在 JavaScript 中处理深度嵌套数组，并根据指定的 ID 列表提取子元素的方法。通过迭代方式，避免了递归可能导致的栈溢出问题，并提供了清晰的代码示例和使用说明，帮助开发者高效地处理复杂的数据结构。无论是否提供 ID 列表，都能返回期望的子元素数组。

简介

在 JavaScript 开发中，经常会遇到需要处理嵌套较深的数组结构的情况。例如，树形结构的组织数据，每个节点可能包含子节点，而子节点又可能包含更深层次的子节点。本文将介绍一种高效的方法，用于从这种嵌套数组中，根据给定的 ID 列表，提取特定节点的直接子节点。

算法思路

核心思路是采用迭代的方式遍历嵌套数组，避免使用递归，从而避免了潜在的栈溢出风险，尤其是在处理深度非常大的嵌套结构时。

判断是否提供了 ID 列表：

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

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

223

查看详情
- 如果提供了 ID 列表，则进入特定的子节点提取逻辑。
- 如果没有提供 ID 列表，则返回所有顶层节点及其直接子节点。
提取特定子节点（当提供了 ID 列表时）：
- 使用栈（Stack）来辅助迭代。将顶层节点放入栈中。
- 循环遍历栈，直到栈为空。
- 每次从栈中弹出一个节点，检查其 ID 是否在给定的 ID 列表中。
- 如果节点的 ID 在 ID 列表中，则提取该节点的直接子节点，并将这些子节点添加到结果数组中。
- 将当前节点的所有子节点压入栈中，以便后续处理。
提取顶层节点及其子节点（当没有提供 ID 列表时）：
- 遍历顶层节点。
- 将每个顶层节点及其直接子节点添加到结果数组中。

代码实现

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

const getCategoriesChildren = (
  categoryIds: Category['id'][],
  categories: Category[],
): Pick<Category, 'id' | 'count' | 'name'>[] => {
  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;
};

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

登录后复制

代码解释：

Category 类型定义了节点的结构，包括 name、id、count、depth 和 children 属性。
getCategoriesChildren 函数接收两个参数：categoryIds（ID 列表）和 categories（顶层节点数组）。
如果没有提供 categoryIds，则使用 reduce 方法遍历 categories 数组，将每个节点及其子节点映射为包含 name、id 和 count 属性的对象，并将它们添加到结果数组中。
如果提供了 categoryIds，则使用栈 stack 来迭代遍历嵌套数组。
在 while 循环中，从栈中弹出一个节点，检查其 ID 是否在 categoryIds 列表中。
如果在列表中，则提取该节点的子节点，并将它们添加到 foundChildren 数组中。
无论节点的 ID 是否在列表中，都将其子节点压入栈中，以便后续处理。

使用示例

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' 的节点的子节点
const children1 = getCategoriesChildren(['101', '3'], data);
console.log(children1);
// Expected Output:
// [
//   { name: 'Engine and Brakes', id: '344', count: '1' },
//   { name: 'SpeedBike', id: '4', count: '12' }
// ]

// 获取所有顶层节点及其子节点
const children2 = getCategoriesChildren([], data);
console.log(children2);
// 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' }
// ]

登录后复制