一、扁平陣列轉樹形

 1 var data=[
 2 {pid:0,id:'a',value:'陝西'},
 3     {pid:'a',id:01,value:'西安'},
 4         {pid:01,id:301,value:'雁塔區'},
 5         {pid:01,id:302,value:'高新區'},
 6     {pid:'a',id:02,value:'渭南'},
 7     {pid:'a',id:03,value:'咸陽'},
 8 {pid:0,id:'b',value:'廣東'},
 9     {pid:'b',id:11,value:'廣州'},
10     {pid:'
 
b',id:12,value:'深圳'},
11     {pid:'b',id:13,value:'潮汕'},
12 {pid:0,id:'c',value:'湖南'},
13     {pid:'c',id:21,value:'長沙'},
14     {pid:'c',id:22,value:'常德'},
15     {pid:'c',id:23,value:'岳陽'},
16 ];
17 function toTree(data){
18   let cloneData = JSON.parse(JSON.stringify(data))    // 對源資料深度克隆
19   let tree = cloneData.filter((father)=>{              //
 
迴圈所有項
20         let branchArr = cloneData.filter((child)=>{
21             return father.id == child.pid;//返回每一項的子級陣列
22         });
23         if(branchArr.length>0){
24             father.children = branchArr; //如果存在子級，則給父級新增一個children屬性，並賦值
25         }
26         return father.pid==0;//返回第一層
27     });
 
28     return tree;    //返回樹形資料
29 }
30 var tree=toTree(data);
31 console.log(tree);

//下面是遞迴實現的方法：

 1 function toTree(data) {
 2     // 刪除 所有 children,以防止多次呼叫
 3     data.forEach(function (item) {
 4         delete item.children;
 5     });
 6     // 將資料儲存為 以 id 為 KEY 的 map 索引資料列
 7     var map = {};
 8     data.forEach(function (item) {
 9         map[item.id] = item;
10     });
11     var val = [];
12     data.forEach(function (item) {
13         // 以當前遍歷項，的pid,去map物件中找到索引的id
14         var parent = map[item.pid];
15             // 好繞啊，如果找到索引，那麼說明此項不在頂級當中,那麼需要把此項新增到，他對應的父級中
16             if (parent) {
17                 (parent.children || ( parent.children = [] )).push(item);
18             } else {
19                 //如果沒有在map中找到對應的索引ID,那麼直接把 當前的item新增到 val結果集中，作為頂級
20                 val.push(item);
21             }
22         });
23         return val;
24 }
25     console.log(toTree(data))

二、樹形陣列轉扁平

 1 var data=[
 2     {id: "a",pid: 0,value: "陝西",children:[
 3         {id: 01,pid: "a",value: "西安"},
 4         {id: 02,pid: "a",value: "渭南"},
 5         {id: 03,pid: "a",value: "咸陽"},
 6     ]},
 7     {id: "b",pid: 0,value: "廣東",children:[
 8         {id: 11,pid: "b",value: "廣州"},
 9         {id: 12,pid: "b",value: "深圳"},
10         {id: 13,pid: "b",value: "潮汕"},
11     ]},
12     {id: "c",pid: 0,value: "湖南",children:[
13         {id: 21,pid: "c",value: "長沙"},
14         {id: 22,pid: "c",value: "常德"},
15         {id: 23,pid: "c",value: "岳陽"},
16     ]},    
17 ];
18 function toLine(data){
19     return data.reduce((arr, {id, value, pid, children = []}) =>
20         arr.concat([{id, value, pid}], toLine(children)), [])
21         return result;
22 }
23 var listarr=toLine(data);
24 console.log(listarr);