当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript多层数组提取方法解析

JavaScript多层数组提取方法解析

2025-08-30 11:37:04 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript 多层数组元素提取技巧》，聊聊，希望可以帮助到正在努力赚钱的你。

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

本文介绍了在 JavaScript 中，如何从深度嵌套的数组结构中，根据指定的 ID 获取子元素。通过迭代方法，避免了递归可能带来的栈溢出问题，并提供了详细的代码示例和类型定义，帮助开发者高效地处理复杂的数据结构。针对不同场景，包括指定 ID 和未指定 ID 的情况，给出了相应的解决方案。

从深度嵌套数组中提取指定子元素

在处理具有嵌套结构的 JSON 数据时，经常需要根据某些条件提取特定的子元素。例如，一个表示商品分类的数据结构可能包含多层嵌套的子分类。本文将介绍如何使用 JavaScript 从这种深度嵌套的数组中，根据给定的分类 ID 列表，提取这些 ID 对应的直接子元素。同时，我们还将讨论在没有指定 ID 的情况下，如何返回默认的父子元素列表。

问题分析

核心问题在于如何有效地遍历深度嵌套的数组，并在遍历过程中根据条件筛选出符合要求的元素。传统的递归方法虽然直观，但在数据层级过深时可能会导致调用栈溢出。因此，我们将采用迭代的方式，结合栈的数据结构来解决这个问题。

解决方案：迭代与栈

以下是一种使用迭代和栈来实现该功能的 JavaScript 函数。该函数接受一个分类 ID 数组和一个包含嵌套分类数据的数组作为输入。

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

const getCategoriesChildren = (
  categoryIds: Category['id'][],
  categories: Category[],
) => {
  const foundChildren: Pick[] = [];

  if (categoryIds.length === 0) {
    return categories.reduce[]>(
      (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 => ({
    name: category.name,
    id: category.id,
    count: category.count,
})

代码解释：

类型定义： 首先定义了一个 Category 类型，用于描述分类数据的结构。
getCategoriesChildren 函数：
- 接受 categoryIds (需要查找的分类 ID 数组) 和 categories (包含嵌套分类数据的数组) 作为参数。
- 如果 categoryIds 为空，则返回所有顶层分类及其直接子分类，使用 reduce 方法将所有分类数据转化为所需格式。
- 如果 categoryIds 不为空，则使用栈来迭代遍历嵌套的分类数据。
- 将顶层分类数据压入栈中。
- 当栈不为空时，循环执行以下操作：
  - 从栈顶弹出一个分类。
  - 如果该分类的 ID 包含在 categoryIds 中，则将其直接子分类转换为所需格式，并添加到 foundChildren 数组中。
  - 将该分类的子分类压入栈中，以便后续处理。
- 返回 foundChildren 数组，其中包含所有符合条件的子分类。
mapCategory 函数：
- 将Category类型的数据转化为Pick类型的数据

使用示例

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

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