js将具有关系型的数组转成树形结构

最新推荐文章于 2023-06-13 15:33:53 发布

原创最新推荐文章于 2023-06-13 15:33:53 发布 · 664 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用JavaScript的reduce和concat函数，将包含from和to关系的数组转化为树形结构，以表示父子节点关系。通过handleConvert函数实现递归处理，并以json示例展示了转换过程。

以下的例子的利用from和to形成父子关系，当然也可以利用parentId等其他的父子关系，将将具有关系型的数组转成树形结构。
reduce函数：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
concat函数：用于合并两个或多个数组。

var json = [
  {from: 0, to: 44},
  {from: 0, to: 449},
  {from: 44, to: 2},
  {from: 44, to: 23},
  {from: 449, to: 223},
  {from: 449, to: 123},
]

var handleConvert = function  (arr,nodeId){
  return arr.reduce((res,current)=>{
    if(current.from == nodeId){
      current.children = this.handleConvert(arr, current.to);
      return res.concat(current);
    }
    return res;
  },[])
}

//调用
handleConvert(json,0); //第一个参数：数组 ， 第二个参数是初始化节点数据