JavaScript 数组遍历怎么实现树形结构拍平操作-js教程-PHP中文网

javascript树形结构拍平核心是递归遍历children并收集节点；支持自定义字段名和过滤条件；深度过大时可用栈模拟dfs或队列实现bfs避免栈溢出。

javascript 数组遍历怎么实现树形结构拍平操作

JavaScript 中将树形结构（嵌套对象数组）拍平为一维数组，核心是递归遍历每个节点及其 children（或类似字段），把所有层级的节点依次收集到一个新数组中。关键在于识别子节点、递归调用、合并结果。

使用递归 + push 实现基础拍平

适用于结构明确（如固定字段 children）、需保留原始节点引用的场景：

function flattenTree(nodes) {
  const result = [];
  function traverse(items) {
    if (!Array.isArray(items)) return;
    for (const node of items) {
      result.push(node); // 先推入当前节点
      if (Array.isArray(node.children)) {
        traverse(node.children); // 再递归处理子节点
      }
    }
  }
  traverse(nodes);
  return result;
}
<p>// 示例数据
const tree = [
{ id: 1, name: 'A', children: [
{ id: 2, name: 'A-1', children: [] },
{ id: 3, name: 'A-2', children: [
{ id: 4, name: 'A-2-1', children: [] }
]
}
]
},
{ id: 5, name: 'B', children: [] }
];</p><p>console.log(flattenTree(tree));
// 输出：[{id:1,...}, {id:2,...}, {id:3,...}, {id:4,...}, {id:5,...}]
</p>

用 reduce + 扩展运算符实现函数式写法

更简洁、无副作用，适合链式调用或配合其他高阶函数使用：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

function flattenTree(nodes) {
  return Array.isArray(nodes)
    ? nodes.reduce((acc, node) => {
        acc.push(node);
        if (Array.isArray(node.children)) {
          acc.push(...flattenTree(node.children));
        }
        return acc;
      }, [])
    : [];
}

支持自定义子字段名和过滤条件

实际项目中，子节点字段可能叫 subItems、nodes 或 items；有时还需跳过某些节点（如 disabled）：

通过参数传入子字段名（如 childrenKey = 'subItems'）
添加 predicate 函数，控制是否纳入结果（例如 node.enabled === true）
避免修改原对象，始终返回新数组

function flattenTree(nodes, options = {}) {
  const { childrenKey = 'children', filter = () => true } = options;
<p>function traverse(items) {
if (!Array.isArray(items)) return [];
return items.reduce((acc, node) => {
if (filter(node)) acc.push(node);
const children = node[childrenKey];
if (Array.isArray(children)) {
acc.push(...traverse(children));
}
return acc;
}, []);
}</p><p>return traverse(nodes);
}</p><p>// 只拍平启用的节点
flattenTree(tree, { filter: node => node.enabled !== false });
</p>

处理超深嵌套与性能注意点

极深树（>1000 层）可能触发栈溢出，可改用栈模拟递归（DFS）或队列（BFS）：

用 Array.push() 和 Array.pop() 模拟调用栈，避免递归调用栈限制
若顺序不敏感，BFS（队列）更易理解；DFS（栈）保持“根→子→孙”自然顺序
对超大数据量，考虑分批处理或 Web Worker 避免阻塞主线程

// 栈实现（DFS，保持原有顺序）
function flattenTreeIterative(nodes, childrenKey = 'children') {
  if (!Array.isArray(nodes)) return [];
  const stack = [...nodes];
  const result = [];
<p>while (stack.length > 0) {
const node = stack.pop();
result.push(node);
const children = node[childrenKey];
if (Array.isArray(children)) {
// 逆序压入，保证左→右顺序（因为 pop 是后进先出）
for (let i = children.length - 1; i >= 0; i--) {
stack.push(children[i]);
}
}
}</p><p>return result.reverse(); // 最后再反转，恢复原始遍历顺序
}
</p>

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