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

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

DDD

发布： 2025-08-16 18:24:18

原创

302人浏览过

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

本文旨在提供一种高效且避免使用 for、foreach 和 while 循环的方法，从深度嵌套的 JavaScript 数组中提取特定 ID 的直接子元素。通过迭代方法，我们能够根据传入的 ID 数组，返回相应的子元素，或者在未传入 ID 时，返回顶层元素的直接子元素。同时，本文还提供了 TypeScript 类型定义，以增强代码的可读性和可维护性。

在处理具有多层嵌套结构的数据时，提取特定层级的子元素是一个常见的需求。传统的循环方式虽然可以实现，但在处理深度嵌套的数据时，代码可读性和效率都会受到影响。本文介绍一种使用迭代方法，结合栈数据结构，从深度嵌套的数组中提取特定 ID 的直接子元素，并避免使用传统的 for、foreach 和 while 循环。

算法思路

该算法的核心思想是使用栈来模拟深度优先搜索（DFS）的过程，从而遍历整个嵌套数组。

处理 ID 数组： 首先，判断是否传入了需要筛选的 ID 数组。
- 如果传入了 ID 数组，则将顶层元素压入栈中。
- 如果未传入 ID 数组，则直接返回顶层元素及其直接子元素的精简信息。
迭代栈： 当栈不为空时，执行以下操作：
- 从栈顶弹出一个元素。
- 判断当前元素的 ID 是否在传入的 ID 数组中。
  - 如果在，则提取当前元素的直接子元素，并将其精简信息添加到结果数组中。
- 将当前元素的子元素压入栈中，继续下一轮迭代。
返回结果： 最终，返回包含所有符合条件的子元素的数组。

代码实现（TypeScript）

首先，定义 Category 的 TypeScript 类型，增强代码可读性和可维护性。

百度文心百中

百度大模型语义搜索体验中心

查看详情

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

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

登录后复制

接下来是核心函数 getCategoriesChildren 的实现：

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

登录后复制

使用示例

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

// 获取顶层元素及其直接子元素
const children2 = getCategoriesChildren([], data);
console.log(children2);
// 输出:
// [
//   { name: 'Car', id: '19', count: '20' },
//   { name: 'Wheel', id: '22', count: '3' },
//   { name: 'Bike', id: '3', count: '12' },
//   { name: 'SpeedBike', id: '4', count: '12' }
// ]

登录后复制