您的当前位置:首页正文

原生js 前端处理省市区等层级数据为树状结构详解(递归)

2024-11-09 来源:个人技术集锦

一、将数据处理为具有层级关系的树状结构(递归)

方法一:

function convertToTree(regions, rootId = "0") { 
return regions.filter(item =>item.pid == rootId).map(item => (item.children = convertToTree(regions,item.id),item)) 
}

注意:逗号运算返回表达式最右边的值 


方法二:

function convertToTree(regions, rootId = "0") { 
let resArr = []
regions.forEach((item)=>{
if(item.id === rootId){
resArr.push(item)
item.children = convertToTree(regions,item.id)
}
})
return resArr;
}

二、实现逻辑:

1.筛选出根节点
2.再筛选出children数组(递归)
3.最后返回一个根节点带有children的树状结构

三、应用场景:

1.省市区数据处理
2.部门下辖单位数据处理

Top