100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js用递归实现数组转树状结构数组 数组转成树形结构数组

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

时间:2020-08-27 15:45:18

相关推荐

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.lengthitem.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"}]}]}]

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。