JavaScript 中怎么在前端将复杂的树形 JSON 扁平化为列表-js教程-PHP中文网

递归遍历实现树结构扁平化，支持保留层级信息、纯扁平化、非递归栈实现及自定义字段与过滤；核心是深度优先遍历，逐层推入节点并递归处理children。

javascript 中怎么在前端将复杂的树形 json 扁平化为列表

直接用递归遍历即可，核心是深度优先遍历每个节点，把所有层级的子节点依次推入一个新数组。

基础递归扁平化（保留层级信息）

适合需要知道每个节点原始层级、路径或父子关系的场景。通过传入当前层级（level）和父 ID（parentId），在扁平结果中带上这些字段：

定义空数组 result 存放结果
写一个递归函数，接收节点数组和可选参数（如 parentId、level）
遍历当前层每个节点，将其关键字段（如 id、name、type）连同 parentId 和 level 一起推入 result
若该节点有 children 数组且非空，递归调用自身，传入 children，并更新 parentId 和 level + 1

示例代码：

function flattenTree(data, parentId = null, level = 0) {
  const result = [];
  data.forEach(node => {
    result.push({
      id: node.id,
      name: node.name,
      type: node.type,
      parentId,
      level
    });
    if (Array.isArray(node.children) && node.children.length > 0) {
      result.push(...flattenTree(node.children, node.id, level + 1));
    }
  });
  return result;
}

纯扁平化（只取关键字段，忽略结构）

如果只需要所有节点的 id、name 等基础字段，不关心层级或父子关系，可以更简洁：

用 reduce + concat 配合递归，避免多次 push
对每个节点，先返回自身（包装为数组），再递归处理 children 并拼接
一行式写法常见于工具函数中，语义清晰

示例代码：

const flattenTreeSimple = (data) =>
  data.reduce((acc, node) => {
    return acc.concat([{ id: node.id, name: node.name }]);
  }, []).concat(
    data.reduce((acc, node) => 
      Array.isArray(node.children) ? acc.concat(flattenTreeSimple(node.children)) : acc, [])
  );

更推荐写成易读版本（逻辑相同，更利于调试）：

Java Maven Secondary Analysis

分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。

下载

function flattenTreeSimple(data) {
  return data.flatMap(node => [
    { id: node.id, name: node.name },
    ...flattenTreeSimple(node.children || [])
  ]);
}

使用栈实现非递归（防栈溢出）

当树极深（比如上千层）、或数据量极大时，递归可能导致栈溢出。改用显式栈（stack）模拟 DFS 更安全：

初始化栈，推入根节点数组（或每个顶层节点）
循环 pop 节点，处理当前节点并 push 其 children（注意顺序：从后往前推，保持原序）
每处理一个节点就推入结果数组
不依赖函数调用栈，内存可控

示例代码：

function flattenTreeIterative(data) {
  const stack = [...data];
  const result = [];
<p>while (stack.length > 0) {
const node = stack.pop();
result.push({ id: node.id, name: node.name });</p><pre class="brush:php;toolbar:false;">if (Array.isArray(node.children)) {
  // 逆序入栈，保证 children 从左到右处理
  for (let i = node.children.length - 1; i >= 0; i--) {
    stack.push(node.children[i]);
  }
}

}

return result; }

按需增强：支持自定义字段与过滤

实际项目中常需灵活控制哪些字段保留、是否跳过某些节点（如 disabled、hidden）：

加一个 mapFn 参数，允许用户自定义每个节点的输出结构
加一个 filterFn 参数，在进入 children 前判断是否跳过当前节点
默认行为保持兼容，增强能力不破坏简单用法

例如只扁平化启用的菜单项：

function flattenTreeAdvanced(data, options = {}) {
  const { mapFn = n => ({ id: n.id, name: n.name }), 
          filterFn = () => true } = options;
<p>const result = [];
function walk(nodes, parentId = null, level = 0) {
nodes.forEach(node => {
if (!filterFn(node)) return;
result.push(mapFn(node, { parentId, level }));
if (Array.isArray(node.children)) {
walk(node.children, node.id, level + 1);
}
});
}
walk(data);
return result;
}</p><p>// 使用示例：只取启用项，加 icon 字段
flattenTreeAdvanced(treeData, {
filterFn: node => node.enabled !== false,
mapFn: (node, { parentId }) => ({
id: node.id,
label: node.name,
icon: node.icon || 'folder',
parentId
})
});</p>

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南