Tree和array之间相互转换

最新推荐文章于 2024-09-02 08:47:15 发布

Justin0223

最新推荐文章于 2024-09-02 08:47:15 发布

阅读量6.6k

点赞数 4

分类专栏： ECMAScript JS工具类

本文链接：https://blog.csdn.net/u010377383/article/details/99711717

版权

本文介绍了如何在JavaScript中将list转换为tree结构，tree转为list，以及在tree结构中查找特定数据的方法。提供了arrayToTree、treeToArray和getTreePathList等实用函数，并讨论了如何根据UI需求修改tree结构的字段。

摘要由CSDN通过智能技术生成

（一）前言
对于大部分网站需求，我们经常会遇到一种需求，将list转为tree结构，或者将tree转为list结构，或者我们在tree结构中查找对于的数据，返回，或者返回顶层到查找级别的list。

（二）将list转为tree
我们一般会在后台数据库设计时候，当我们设计省市县联动时候，一般会在数据库设计唯一索引id，和pid字段，pid关联父级别id，这样当查询出来的数据很可能是类似下面的结构

const data = [
  { id: 1, pid: 0, name: 'no.1' },
  { id: 2, pid: 1, name: 'no.2' },
  { id: 3, pid: 1, name: 'no.3' },
  { id: 4, pid: 1, name: 'no.4' },
  { id: 5, pid: 1, name: 'no.5' },
  { id: 6, pid: 2, name: 'no.6' },
  { id: 7, pid: 2, name: 'no.7' },
  { id: 8, pid: 2, name: 'no.8' },
  { id: 9, pid: 3, name: 'no.9' },
  { id: 10, pid: 3, name: 'no.10' },
  { id: 11, pid: 3, name: 'no.11' },
  { id: 12, pid: 4, name: 'no.12' },
  { id: 13, pid: 4, name: 'no.13' },
  { id: 14, pid: 13, name: 'no.14' },
];

但是实际上大部分UI展示需要生成tree形结构，方便UI暂时，这时候我们应该怎么办呢，你可以写一个arrayToTree方法，类似如下

function arrayToTree(list, pid = 0) {
  return list.filter(item => item.pid === pid).map(item => ({
    ...item,
    children: arrayToTree(list, item.id),
  }));
}

// 调用
console.log(arrayToTree(data));

那么调用和输出结构就如下