JS数据结构转换_树形数据扁平化-js教程-PHP中文网

JS数据结构转换_树形数据扁平化

幻影之瞳

发布： 2025-11-20 16:10:02

原创

198人浏览过

树形数据扁平化可通过递归或迭代实现，递归适合一般场景，迭代避免栈溢出，添加level字段可保留层级信息，便于前端展示。

js数据结构转换_树形数据扁平化

树形数据扁平化是前端开发中常见的需求，比如将嵌套的菜单、组织架构或分类数据转换成一维数组，方便渲染或搜索。JavaScript 提供了多种方式实现这一操作，核心思路是遍历树结构，把每个节点按顺序提取出来。

使用递归实现深度优先扁平化

递归是最直观的方法，通过深度优先遍历，依次访问每个子节点，并将其推入结果数组。

示例代码：

function flattenTree(tree, result = []) {
  tree.forEach(node => {
    result.push({ ...node });
    if (node.children) {
      flattenTree(node.children, result);
    }
  });
  return result;
}

登录后复制

说明：

每次处理一个节点时，先将其拷贝到结果数组
如果该节点有 children，则递归处理其子节点
适用于大多数嵌套结构，逻辑清晰

利用栈模拟递归（避免调用栈过深）

对于层级非常深的树，递归可能导致调用栈溢出。可以用栈结构手动维护遍历过程。

seacms影视管理系统

海洋影视管理系统（seacms，海洋cms）是一套专为不同需求的站长而设计的视频点播系统，灵活，方便，人性化设计简单易用是最大的特色，是快速架设视频网站首选，只需5分钟即可建立一个海量的视频讯息的行业网站。海洋cms采用PHP+MYSQL架构,原生PHP代码带来卓越的访问速度和负载能力免去您的后顾之优。海洋cms支持一键转换原max的模板和数据，实现网站无缝迁移到新平台。众多人性化功能设计，超

116

查看详情

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 添加缩进样式。

基本上就这些。根据具体需求选择递归或迭代方式，是否需要保留层级信息也很关键。扁平化本身不复杂，但处理好边界和性能能让代码更健壮。

以上就是JS数据结构转换_树形数据扁平化的详细内容，更多请关注php中文网其它相关文章！