js用递归实现数组转树状结构数组 数组转成树形结构数组

前言： 工作中需要将一个扁平的数组转换为嵌套的树状结构的数组

// 原始数据结构
let region  = [
    ['北京市','北京市','东城区'],
    ['北京市','北京市','西城区'],
    ['北京市','北京市'],
    ['四川省','成都市'],
    ['四川省','成都市','高新区'],
]

// 理想数据结构
list = [{
    id: "北京市0",
    index: 0,
    label: "北京市",
    pid: "",
    children: [{
        id: "北京市1",
        index: 1,
        label: "北京市",
        pid: "北京市0",
        children: [{
            id: "东城区2",
            index: 2,
            label: "东城区",
            pid: "北京市1"
        },
        {
            id: "西城区2",
            index: 2,
            label: "西城区",
            pid: "北京市1"
        }
        ]
    }]
},
{
    id: "四川省0",
    index: 0,
    label: "四川省",
    pid: "",
    children: [{
        id: "成都市1",
        index: 1,
        label: "成都市",
        pid: "四川省0",
        children: [{
            id: "高新区2",
            index: 2,
            label: "高新区",
            pid: "成都市1"
        }
        ]
    }]
}]

处理方法：

第一步

let dataList = []
region.forEach(item => {
    let isChild = item.length
    item.forEach((ele, index) => {
        let obj = {
           label: ele,
           index,
           id: `${ele}${index}`,
           pid: index === 0 ? '':`${item[index-1]}${index - 1}`
       }
       dataList.push(obj)
    })
})

// 执行以上代码后 dataList数组的结构为：
[
    {label: '北京市', index: 0, id: '北京市0', pid: ''},
    {label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
    {label: '东城区', index: 2, id: '东城区2', pid: '北京市1'},
    {label: '北京市', index: 0, id: '北京市0', pid: ''},
    {label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
    {label: '西城区', index: 2, id: '西城区2', pid: '北京市1'},
    {label: '北京市', index: 0, id: '北京市0', pid: ''},
    {label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
    {label: '四川省', index: 0, id: '四川省0', pid: ''},
    {label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
    {label: '四川省', index: 0, id: '四川省0', pid: ''},
    {label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
    {label: '高新区', index: 2, id: '高新区2', pid: '成都市1'}
]

第二步：（去重）

// 去重
let newobj = {}; 
dataList = dataList.reduce((preVal, curVal) => {
 newobj[curVal.label+curVal.index+curVal.pid] ? '' : newobj[curVal.label+curVal.index+curVal.pid] = preVal.push(curVal); 
 return preVal 
}, [])
// 执行以上代码后 dataList数组的结构为：
[
    {label: '北京市', index: 0, id: '北京市0', pid: ''},
    {label: '北京市', index: 1, id: '北京市1', pid: '北京市0'},
    {label: '东城区', index: 2, id: '东城区2', pid: '北京市1'},
    {label: '西城区', index: 2, id: '西城区2', pid: '北京市1'},
    {label: '四川省', index: 0, id: '四川省0', pid: ''},
    {label: '成都市', index: 1, id: '成都市1', pid: '四川省0'},
    {label: '高新区', index: 2, id: '高新区2', pid: '成都市1'}
]

第三步：（递归生成树形结构）

/**
*@param { Array } list 需要转的数组
*@param { String } rootValue 根节点的id
*/
function transListToTreeData(list, rootValue) {
  var arr = []
  list.forEach(item => {
    if (item.pid === rootValue) {
      const children = transListToTreeData(list, item.id)
      if (children.length) {
        item.children = children
      }
      arr.push(item)
    }
  })
  return arr
}
transListToTreeData(dataList,'') // 调用方法
// 执行以上代码后 dataList数组的结构为：
list = [{
    id: "北京市0",
    index: 0,
    label: "北京市",
    pid: "",
    children: [{
        id: "北京市1",
        index: 1,
        label: "北京市",
        pid: "北京市0",
        children: [{
            id: "东城区2",
            index: 2,
            label: "东城区",
            pid: "北京市1"
        },
        {
            id: "西城区2",
            index: 2,
            label: "西城区",
            pid: "北京市1"
        }
        ]
    }]
},
{
    id: "四川省0",
    index: 0,
    label: "四川省",
    pid: "",
    children: [{
        id: "成都市1",
        index: 1,
        label: "成都市",
        pid: "四川省0",
        children: [{
            id: "高新区2",
            index: 2,
            label: "高新区",
            pid: "成都市1"
        }
        ]
    }]
}]