JavaScript树形结构拍平核心是递归遍历children并收集节点；支持自定义字段名和过滤条件；深度过大时可用栈模拟DFS或队列实现BFS避免栈溢出。
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,...}]
用 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）：
立即学习“Java免费学习笔记（深入）”；
- 通过参数传入子字段名（如
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 });
处理超深嵌套与性能注意点
极深树（>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(); // 最后再反转，恢复原始遍历顺序
}
