前言: 工作中需要将一个扁平的数组转换为嵌套的树状结构的数组
// 原始数据结构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"}]}]}]