JS遞迴遍歷樹結構

先展示一波資料,當然通常的專案id都是為string型別的，我這裡也是比較懶，所以直接少寫了一些''

`const a= [ { id:1, name:"第一節", children:[{ id:1.1, name:"第二節", children:[{ id:1.11, name:"第三節" },{ id:1.12, name:"第三的隔壁", }] }] },{ id:2, name:"第一節", children:[{ id:2.1, name:"第二節", children:[{ id:2.11, name:"第三節" }] }] } ]`

專案需求是分別返回單獨省市縣大概如下：

首先後端給的資料中並沒有包含父級id，即parentId,所以我這裡需要自己新增，因為比較懶所以測試中的par即parentId,par的值是根據上一級id累加，如果沒有上一級，那麼par的值為0，程式碼如下

`a && a.map((item,index) => { item.par='0' item.children && checkChild(item.children, item.par+','+item.id); }) function checkChild(child,parentId) { child.map((item,index) => { //pre為字串型別 item.par = String(parentId) item.children && checkChild(item.children, item.par+','+item.id); }) } console.log(a)`

通過返回一個新的陣列，得到的陣列為下

接著some方法來依次執行陣列，判斷是否有children，接著根據父級id的length來判斷是第幾層，程式碼如下

`const checkItem= [ 2,2.1,2.11,1.1,1.11 ] const findChild = (arr = [], value) => { let result = {};

function flatten(list = [], value) {
    list.some(item => {
        if (item.id === value) {
            result = item;
            return true
        }
        flatten(item.children, value);
    });
}

flatten(arr, value);
return result
 

};
let result = checkItem.reduce((t, v, i) => {
let value = findChild(a,v);
let isParent=value&&value.par.split(',').filter(v=>parseFloat(v))
console.log(value)
t[isParent.length]= t[isParent.length] || []
t[isParent.length].push(value.id)
return t
}, []);
console.log(result)`

這樣就可以得到最上面圖片中的值了