JS数据转换 —— 树形结构和平铺结构的转换

最新推荐文章于 2024-06-18 09:42:51 发布

小周同学:

最新推荐文章于 2024-06-18 09:42:51 发布

阅读量341

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/weixin_58495461/article/details/119987314

js 专栏收录该内容

5 篇文章

订阅专栏

这篇博客探讨了两种数据结构转换的方法：正向将树形结构转化为平铺结构，以及逆向将平铺结构还原为树形结构。在正向转换中，通过递归实现从外到内的遍历；而在逆向转换中，利用pid查找并构建子节点，以达到树形结构。这两种转换在数据处理和组织中有着广泛应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

正向-树形结构转平铺
// 正向-树形结构转平铺
// 从外到内依次递归，有 children 则继续递归

function treeToArr(data, pid=null, res=[]) {
  data.forEach(item => {
    res.push({ pid: pid, id: item.id, name: item.name });
    if(item.children && item.children.length !== 0) {
      treeToArr(item.children, item.id, res);
    }
  });
  return res;
};

const arr = treeToArr(data);
console.log(arr);

逆向-平铺结构转树形
// 依次在数组中找到每一层级对应的元素，同时每个元素的 children 属性对应的 value 通过 pid 去找到，然后递归执行下去

function arrToTree(arr, pid=null) {
  const res = [];
  arr.forEach(item => {
    if(item.pid === pid) {
      // 这样每次都需要遍历整个数组，因此时间复杂度为 n*n
      // const children = arrToTree(arr, item.id)   

      // 往下递归时，每次数组的大小都在减小，每次都筛选掉父代元素，最终的时间复杂度为 n*logn
      const children = arrToTree(arr.filter(v => v.pid !== pid), item.id);
      if(children.length) {
        res.push({ ...item, children })
      }else {
        res.push({ ...item })
      }
    }
  });
  return res;
};

const tree = arrToTree(arr);
console.log(JSON.stringify(tree, null, 2));