JavaScript 中怎么对接口返回的树形菜单数据进行深度扁平化-js教程-PHP中文网

JavaScript扁平化树形菜单需递归或栈遍历：递归法简洁常用，用reduce提取节点并展开children；深层时改用栈避免溢出，逆序入栈后reverse保序；注意children字段名差异及null/undefined健壮处理。

javascript 中怎么对接口返回的树形菜单数据进行深度扁平化

JavaScript 中对接口返回的树形菜单数据进行深度扁平化，核心是递归遍历每个节点及其 children（或类似字段），把所有层级的节点一次性提取到一个一维数组中。

明确树形结构特征

常见菜单接口返回的数据结构类似：

{
  id: 1,
  name: "系统管理",
  children: [
    {
      id: 2,
      name: "用户管理",
      children: [
        { id: 3, name: "新增用户" },
        { id: 4, name: "编辑用户" }
      ]
    }
  ]
}

关键点：节点可能有 children 字段，且该字段为数组；子节点结构与父节点一致；层级不确定（可能很深）。

使用递归 + 展开语法（推荐）

简洁、可读性强，适合大多数场景：

定义一个函数，接收节点数组和可选的父级信息（如 parentId、level）
对每个节点，先将其本身加入结果数组
若存在 children 且不为空，则递归调用自身，传入子节点数组
利用扩展运算符 [...result, ...recursive(children)] 或 push(...) 合并

示例代码：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function flattenMenu(nodes, parentId = null, level = 0) {
  if (!Array.isArray(nodes)) return [];
<p>return nodes.reduce((acc, node) => {
const { children, ...rest } = node;
acc.push({
...rest,
parentId,
level
});</p><pre class="brush:php;toolbar:false;">if (Array.isArray(children) && children.length > 0) {
  acc.push(...flattenMenu(children, node.id, level + 1));
}

return acc;

}, []); }

// 调用 const flatList = flattenMenu(menuData); // menuData 是接口返回的根数组

使用栈模拟递归（避免深层调用栈溢出）

当菜单层级极深（比如 1000+ 层），递归可能导致栈溢出，此时可用显式栈代替：

初始化一个栈，存入带上下文的节点（如 { node, parentId, level }）
循环出栈，处理当前节点，推入其每个子节点（更新 parentId 和 level）
用数组收集所有已处理节点

示例代码：

function flattenMenuIterative(nodes, parentId = null, level = 0) {
  if (!Array.isArray(nodes)) return [];
<p>const stack = nodes.map(node => ({ node, parentId, level }));
const result = [];</p><p>while (stack.length > 0) {
const { node, parentId, level } = stack.pop();
const { children, ...rest } = node;</p><pre class="brush:php;toolbar:false;">result.push({ ...rest, parentId, level });

if (Array.isArray(children) && children.length > 0) {
  // 逆序入栈，保证原始顺序（可选）
  for (let i = children.length - 1; i >= 0; i--) {
    stack.push({
      node: children[i],
      parentId: node.id,
      level: level + 1
    });
  }
}

}

return result.reverse(); // 恢复原顺序（若需） }