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

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: '長沙市'},{id: 10,parentId: 4,name: '工業園區'},{id: 11,parentId: 4,name: '吳中區'},{id: 12,parentId: 4,name: '姑蘇區'} ];

方法1：

先上我最喜歡的循環方式生成

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

方法2：

使用遞歸方式生成

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

ps:以上方法都會改變原數組數據，建議根據使用時先拷貝一份數據。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。