這里給大家介紹幾種使用js將下面的數(shù)組生成樹狀結(jié)構(gòu)方法，有不足的地方歡迎大神指正

let cityList = [{id: 1, parentId: 0,name: '江蘇省'},{id: 2,parentId: 0,name: '廣東省'},{id: 3,parentId: 0,name: '湖南省'},{id: 4,parentId: 1,name: '蘇州市'},{id: 5,parentId: 1,name: '無錫市'},{id: 6,parentId: 1,name: '南通市'},{id: 7,parentId: 2,name: '廣州市'},{id: 8,parentId: 2,name: '深圳市'},{id: 9,parentId: 3,name: '長(zhǎng)沙市'},{id: 10,parentId: 4,name: '工業(yè)園區(qū)'},{id: 11,parentId: 4,name: '吳中區(qū)'},{id: 12,parentId: 4,name: '姑蘇區(qū)'} ];

方法1：

先上我最喜歡的循環(huán)方式生成

function listToTree() {let array = []cityList .forEach(item => { // 遍歷對(duì)象數(shù)組item.children = cityList.filter(info => info.parentId === item.id) // 找到每個(gè)對(duì)象的子節(jié)點(diǎn) if (item.parentId === 0) {array.push(item) // 將一層節(jié)點(diǎn)放入新數(shù)組中}})return array //循環(huán)結(jié)束，返回結(jié)果 }

方法2：

使用遞歸方式生成

function recursionGenerateTree(pid, arr) {let array = []arr.forEach(item => {if (item.parentId === pid) {item.children = recursionGenerateTree(item.id, arr) // 接收子節(jié)點(diǎn)array.push(item)};})return array // 返回查找到的節(jié)點(diǎn) } console.log(recursionGenerateTree(0, cityList))

ps:以上方法都會(huì)改變?cè)瓟?shù)組數(shù)據(jù)，建議根據(jù)使用時(shí)先拷貝一份數(shù)據(jù)。

總結(jié)

以上是生活随笔為你收集整理的js生成树状结构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。