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

导读:本篇文章讲解 js用递归实现数组转树状结构数组 数组转成树形结构数组,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

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

// 原始数据结构
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"
        }
        ]
    }]
}]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/64748.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!