树形数据扁平化可通过递归或迭代实现，递归适合一般场景，迭代避免栈溢出，添加level字段可保留层级信息，便于前端展示。
树形数据扁平化是前端开发中常见的需求，比如将嵌套的菜单、组织架构或分类数据转换成一维数组，方便渲染或搜索。JavaScript 提供了多种方式实现这一操作，核心思路是遍历树结构，把每个节点按顺序提取出来。
使用递归实现深度优先扁平化
递归是最直观的方法，通过深度优先遍历，依次访问每个子节点，并将其推入结果数组。
示例代码：
function flattenTree(tree, result = []) {
tree.forEach(node => {
result.push({ ...node });
if (node.children) {
flattenTree(node.children, result);
}
});
return result;
}
说明：
- 每次处理一个节点时，先将其拷贝到结果数组
- 如果该节点有 children，则递归处理其子节点
- 适用于大多数嵌套结构，逻辑清晰
利用栈模拟递归（避免调用栈过深）
对于层级非常深的树，递归可能导致调用栈溢出。可以用栈结构手动维护遍历过程。
W78CMS企业网站管理系统 (中英繁三语版)1.0 build 100724
下载
程序采用ASP+ACCESS开发完成。中英繁三语言,所有页面采用UTF-8全球通用编码,兼容简体中文、繁体中文及英语,适用于中小企业网站运用。后台数据同时录入中文及英文，繁体采用JS自动转换，无需维护。免费版主要功能如下：·系统管理：系统综合设置、管理员管理、数据库备份、上传文件管理。·单页管理:自由无限制添加个性页面，如：公司简介、组织结构、联系我们等
function flattenTreeIteratively(tree) {
const result = [];
const stack = [...tree];
while (stack.length > 0) {
const node = stack.pop();
result.unshift(node); // 保证顺序可改为 unshift 或 reverse
if (node.children) {
stack.push(...node.children);
}
}
return result;
}
注意：
- 使用数组模拟栈，pop 和 push 操作维护遍历顺序
- result 使用 unshift 可保持前序顺序，也可最后 reverse
- 更稳定，适合大数据量场景
添加层级信息便于展示
在实际应用中，可能需要保留节点的层级关系，比如用于缩进显示。
function flattenWithLevel(tree, level = 0) {
let result = [];
tree.forEach(node => {
result.push({ ...node, level });
if (node.children) {
result = result.concat(flattenWithLevel(node.children, level + 1));
}
});
return result;
}
这样每个节点都会带上 level 字段，前端可以根据 level 添加缩进样式。
基本上就这些。根据具体需求选择递归或迭代方式，是否需要保留层级信息也很关键。扁平化本身不复杂，但处理好边界和性能能让代码更健壮。
