如何使用 JavaScript 将扁平数据转换为树形结构

最新推荐文章于 2025-05-02 04:08:11 发布
最新推荐文章于 2025-05-02 04:08:11 发布
阅读量691 收藏 29
点赞数 34
分类专栏： javascript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16242613/article/details/147568310
版权

文章目录

在实际开发中，我们经常需要将扁平的数据结构（如数据库查询结果）转换为树形结构（如菜单、评论回复等）。本文将详细介绍多种实现方法，并提供完整的代码示例。

一、理解数据结构

1. 扁平数据结构示例

const flatData = [
  { id: 1, name: '部门1', parentId: 0 },
  { id: 2, name: '部门2', parentId: 1 },
  { id: 3, name: '部门3', parentId: 1 },
  { id: 4, name: '部门4', parentId: 3 },
  { id: 5, name: '部门5', parentId: 3 },
  { id: 6, name: '部门6', parentId: 0 },
];

2. 期望的树形结构

[
  {
    id: 1,
    name: '部门1',
    children: [
      {
        id: 2,
        name: '部门2'
      },
      {
        id: 3,
        name: '部门3',
        children: [
          { id: 4, name: '部门4' },
          { id: 5, name: '部门5' }
        ]
      }
    ]
  },
  {
    id: 6,
    name: '部门6'
  }
]

二、实现方法

方法1：递归实现（经典算法）

function buildTree(items, parentId = 0) {
  const result = [];
  
  for (const item of items) {
    if (item.parentId === parentId) {
      const children = buildTree(items, item.id);
      if (children.length) {
        item.children = children;
      }
      result.push(item);
    }
  }
  
  return result;
}

const treeData = buildTree(flatData);
console.log(JSON.stringify(treeData, null, 2));

优点：

  • 逻辑清晰直观
  • 适合理解树形结构的构建过程

缺点：

  • 时间复杂度较高（O(n^2)）
  • 大数据量时性能较差

方法2：使用对象引用（高效算法）

function buildTreeOptimized(items) {
  const itemMap = {};
  const result = [];
  
  // 首先构建哈希映射
  for (const item of items) {
    itemMap[item.id] = { ...item, children: [] };
  }
  
  // 构建树结构
  for (const item of items) {
    const node = itemMap[item.id];
    if (item.parentId === 0) {
      result.push(node);
    } else {
      if (itemMap[item.parentId]) {
        itemMap[item.parentId].children.push(node);
      }
    }
  }
  
  return result;
}

const optimizedTree = buildTreeOptimized(flatData);
console.log(JSON.stringify(optimizedTree, null, 2));

优点：

  • 时间复杂度O(n)，性能优异
  • 适合大数据量处理

缺点：

  • 需要额外的内存空间存储映射

方法3：使用Map数据结构（ES6+）

function buildTreeWithMap(items) {
  const map = new Map();
  const result = [];
  
  // 初始化所有节点并存入Map
  items.forEach(item => {
    map.set(item.id, { ...item, children: [] });
  });
  
  // 构建树结构
  items.forEach(item => {
    const node = map.get(item.id);
    if (item.parentId === 0) {
      result.push(node);
    } else {
      const parent = map.get(item.parentId);
      if (parent) {
        parent.children.push(node);
      }
    }
  });
  
  return result;
}

const mapTree = buildTreeWithMap(flatData);
console.log(JSON.stringify(mapTree, null, 2));

优点：

  • 使用Map更现代，性能更好
  • 支持任意类型作为键

方法4：使用reduce实现（函数式编程）

function buildTreeWithReduce(items) {
  const itemMap = items.reduce((map, item) => {
    map[item.id] = { ...item, children: [] };
    return map;
  }, {});
  
  return items.reduce((result, item) => {
    if (item.parentId === 0) {
      result.push(itemMap[item.id]);
    } else if (itemMap[item.parentId]) {
      itemMap[item.parentId].children.push(itemMap[item.id]);
    }
    return result;
  }, []);
}

const reducedTree = buildTreeWithReduce(flatData);
console.log(JSON.stringify(reducedTree, null, 2));

优点：

  • 函数式风格，代码简洁
  • 两次遍历完成构建

三、进阶功能实现

1. 添加排序功能

function buildTreeWithSort(items, sortBy = 'id') {
  const itemMap = {};
  const result = [];
  
  // 构建映射
  items.forEach(item => {
    itemMap[item.id] = { ...item, children: [] };
  });
  
  // 构建树结构
  items.forEach(item => {
    const node = itemMap[item.id];
    if (item.parentId === 0) {
      result.push(node);
    } else if (itemMap[item.parentId]) {
      itemMap[item.parentId].children.push(node);
    }
  });
  
  // 递归排序
  function sortTree(nodes) {
    nodes.sort((a, b) => a[sortBy] - b[sortBy]);
    nodes.forEach(node => {
      if (node.children.length) {
        sortTree(node.children);
      }
    });
  }
  
  sortTree(result);
  return result;
}

const sortedTree = buildTreeWithSort(flatData, 'id');
console.log(JSON.stringify(sortedTree, null, 2));

2. 处理循环引用

function buildTreeWithCycleDetection(items) {
  const itemMap = {};
  const result = [];
  const visited = new Set();
  
  // 构建映射
  items.forEach(item => {
    itemMap[item.id] = { ...item, children: [] };
  });
  
  // 检测循环引用
  function hasCycle(node, parentIds = new Set()) {
    if (parentIds.has(node.id)) return true;
    parentIds.add(node.id);
    
    for (const child of node.children) {
      if (hasCycle(child, new Set(parentIds))) {
        return true;
      }
    }
    
    return false;
  }
  
  // 构建树结构
  items.forEach(item => {
    if (!visited.has(item.id)) {
      const node = itemMap[item.id];
      if (item.parentId === 0) {
        result.push(node);
      } else if (itemMap[item.parentId]) {
        itemMap[item.parentId].children.push(node);
      }
      visited.add(item.id);
      
      // 检查循环引用
      if (hasCycle(node)) {
        throw new Error(`检测到循环引用，节点ID: ${node.id}`);
      }
    }
  });
  
  return result;
}

3. 支持自定义子节点字段名

function buildTreeCustomChildren(items, childrenField = 'children') {
  const itemMap = {};
  const result = [];
  
  // 构建映射
  items.forEach(item => {
    itemMap[item.id] = { ...item, [childrenField]: [] };
  });
  
  // 构建树结构
  items.forEach(item => {
    const node = itemMap[item.id];
    if (item.parentId === 0) {
      result.push(node);
    } else if (itemMap[item.parentId]) {
      itemMap[item.parentId][childrenField].push(node);
    }
  });
  
  return result;
}

四、性能优化技巧

  1. 使用Map代替普通对象：当ID为非数字时性能更好
  2. 批量处理数据：对于大数据量可分批次处理
  3. 使用Web Worker：对于极大数据集可在后台线程处理
  4. 惰性加载：只构建和渲染可见部分的树结构

五、实际应用示例

1. 渲染树形菜单（React示例）

function TreeMenu({ data }) {
  return (
    <ul>
      {data.map(node => (
        <li key={node.id}>
          {node.name}
          {node.children && node.children.length > 0 && (
            <TreeMenu data={node.children} />
          )}
        </li>
      ))}
    </ul>
  );
}

// 使用
const treeData = buildTreeOptimized(flatData);
ReactDOM.render(<TreeMenu data={treeData} />, document.getElementById('root'));

2. 树形表格（Vue示例）

<template>
  <table>
    <tbody>
      <tree-row 
        v-for="node in treeData" 
        :key="node.id" 
        :node="node"
        :level="0"
      />
    </tbody>
  </table>
</template>

<script>
import { buildTreeWithMap } from './treeUtils';

export default {
  data() {
    return {
      flatData: [...], // 原始扁平数据
      treeData: []
    };
  },
  created() {
    this.treeData = buildTreeWithMap(this.flatData);
  },
  components: {
    TreeRow: {
      props: ['node', 'level'],
      template: `
        <tr :style="{ paddingLeft: level * 20 + 'px' }">
          <td>{{ node.name }}</td>
          <td>{{ node.otherField }}</td>
        </tr>
        <tree-row 
          v-for="child in node.children" 
          :key="child.id" 
          :node="child"
          :level="level + 1"
          v-if="node.children"
        />
      `
    }
  }
};
</script>

六、总结与最佳实践

  1. 选择合适算法：

    • 小数据量：递归算法简单直观
    • 大数据量：对象引用或Map实现性能更好

  2. 处理边界情况：

    • 无效的parentId引用
    • 循环引用检测
    • 重复数据处理

  3. 扩展性考虑：

    • 支持自定义子节点字段名
    • 添加排序功能
    • 支持异步数据加载

  4. 性能监控：

    • 对于超大数据集考虑分页或虚拟滚动
    • 使用性能分析工具监控构建时间

  5. 测试建议：

    // 单元测试示例
describe('树形结构构建', () => {
  it('应正确构建树形结构', () => {
    const flatData = [...];
    const treeData = buildTreeOptimized(flatData);
    expect(treeData.length).toBe(2);
    expect(treeData[0].children.length).toBe(2);
    expect(treeData[0].children[1].children.length).toBe(2);
  });
  
  it('应处理无效parentId', () => {
    const invalidData = [...];
    const treeData = buildTreeOptimized(invalidData);
    expect(treeData.length).toBe(1);
  });
});

通过本文介绍的各种方法和技巧，您应该能够根据实际需求选择最适合的方式将扁平数据转换为树形结构。在实际项目中，推荐使用对象引用或Map实现的高效算法，它们在大数据量下表现优异，同时代码也相对清晰可维护。

在这里插入图片描述

javascript将扁平的数据转为树形结构的高效率算法
10-15
在JavaScript编程中，将扁平的数据结构转换为树形结构是一项常见的任务，特别是在处理层级关系的数据时，如组织结构、菜单导航或文件系统等。在本文中，我们将深入探讨一种高效的算法，该算法可以将一维数组转换为...
把扁平化的数据转换成树形结构的JSON，把树形JSON扁平化.zip
01-05
本教程将深入探讨如何将扁平化的数据转换为树形结构的JSON，以及如何将树形JSON扁平化。 首先，让我们理解这两种数据结构的区别。扁平化数据通常是指一层级的数据列表，例如数据库表中的记录，它们之间可能通过共享...
JavaScript将扁平数据转换为树形结构
qq_45701130的博客
03-26 2740
将一组扁平数据转换为树形的层级结构 <script> // 将扁平数据转换为树形结构 function test(arr) { // 将对象id和temp数组的下标对应起来 // 这样可以根据id准确找到某个对象 let temp = []; for (let key of arr) { temp[key.id] = key; } //保存树形结构 let res
JavaScript中的扁平化数据转换为树形结构、树形结构扁平化数据
weixin_45803990的博客
08-20 2861
原始数据结构是 {id: 639, name: "好公司", type: 0, pId: 638, code: "1", domain: ""} {id: 640, name: "孩子", type: 0, pId: 639, code: "child", domain: ""} {id: 642, name: "孙子", type: 0, pId: 640, code: "1", domain: ""} {id: 645, name: "2", type: 0, pId: 640, code: "2
JS中的扁平化数据转换为树形结构数组
Lily的博客
07-05 761
【代码】JS中的扁平化数据转换为树形结构数组。
扁平化数据转换树形结构
xiaochen_____的博客
02-13 831
扁平化数据转换
JS将扁平数据转换成树形结构
刘刘刘的博客
08-04 576
JS将扁平数据转换成树形结构
js扁平化转换为树形结构数组
weixin_43138550的博客
02-15 1129
扁平化数据 ---- > 树形结构
扁平数据结构和树形数据结构之间的转换
lyy112987的博客
10-12 392
var arr = [ { id: 1, title: '标题1', parent_id: 0 }, { id: 2, title: '标题2', parent_id: 0 }, { id: 3, title: '标题3', parent_id: 2 }, { id: 4, title: '标题4', parent_id: 3 }, { id: 5, title: '标题5', parent_id: 4 }, ...
JavaScript 实现普通数组数据转化为树形数据结构
疯狂假前端的博客
09-13 2557
这个buildTree函数使用了递归的方式来构建树形数据结构。通过过滤、映射和递归调用，它逐层构建每个节点的子节点，直到所有节点的children属性都被正确填充。这种方法简洁且高效，适合处理层级数据。
浅理解扁平数据结构转Tree（树形结构）
黛琳ghz的博客，期待你的关注。
04-02 1634
在前端开发中，我们经常需要将扁平数据结构转换为树形结构（Tree）。比如在网站菜单、商品分类等场景下，都需要使用树形结构来实现数据的层级呈现。在本篇博客中，我将介绍一种常见的方法，使用递归方式来将扁平数据结构转换成树形结构。
把扁平化的数据转换成树形结构的JSON
08-12
下面是一个简单的JavaScript函数示例，演示了如何将扁平化的数据转换为树形结构： ```javascript function flatDataToTree(flatData, idField, parentField) { const nodeMap = {}; const tree = []; // 构建...
watch 数组 Vue 3
qq_30049249的博客
05-01 187
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
使用vue2 开发一个纯静态的校园二手交易平台-前端项目练习
Json的知识梦工厂
04-27 816
因为最近在学习vue相关的技术，所以就根据学习的前端技术，来写一些纯前端的项目来练习，这篇文章主要是分享一下 我做的这个项目的一些功能，如果最近你也在学习前端，希望这篇文章能帮助到你，大家也可以仿照这个项目，自己尝试着写一些完整的功能，从而提高自己的编程能力。这个项目 使用的技术是vue2 做的。：用户可以在个人中心查看自己的交易记录、发布的商品、参与的圈子、个人信息等，便于管理账户和交易信息。：提供交换物品的功能，用户可以发布自己想交换的物品，并与其他用户进行交换，促进物品的循环利用。
游戏开发的Typescript(2)禁忌函数 - 类 eval()函数
最新发布
wgc2k的博客
05-02 547
在 TypeScript 里，eval()是个内置函数，其作用是对字符串形式的 JavaScript 代码进行解析并执行。
组件的基本知识
Shootingmemory的博客
04-27 1184
由于vue会进行打包操作，然后在前端渲染，会出现将”局部样式“变为“全局样式”，所以这时候就需要用到scoped，直接在。⼦组件恰当时机， 触发⽗组件的⾃定义事件 , emit(‘⾃定义事件’, 携带的参数…因为属性选择器[data-v-xxxx]的唯⼀性, 保证了该样式只能对当前组件内的元素⽣效。下创建一个复用的组件，然后需要在主vue文件应用那么我在主vue文件的就应该这样写。⽗组件内，⼦组件上，绑定⾃定义事件，@⾃定义事件=“⽗修改数据的函数” （⽗绑定）⽗组件通过 ⾃定义属性 传递数据 （⽗传）
字节跳动在GitHub上有哪些开源项目
interpromotion的博客
04-23 1505
字节跳动（ByteDance）在GitHub上开源了许多项目，涵盖前端、后端、云原生、AI、数据库等多个领域。这些项目体现了字节跳动在技术领域的广泛投入，适合开发者学习或直接应用于生产环境。
第十三节：实战与工程化高频题-TypeScript集成要点
qq_40860137的博客
04-28 840
类型声明：defineProps<{ title: string }>()、defineEmits<(...)>() 类型推断：Composition API自动推导响应式变量类型
关于浏览器对于HTML实体编码，urlencode，Unicode解析
m0_74848570的博客
04-29 552
,<title>标签，在HTML解析器解析RCDATA 标签时，进入RCDATA状态，在这个状态能被识别为标签的只有
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北辰alk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值