//已知JSON樹狀形結構的數據data
let data = [
             {id:1,title:'標題1',parent_id:0,},
             {id:2,title:'標題2',parent_id:0,
              children:[
                 {id:3,title:'標題2-1',parent_id:2,
                  children:[
                    {id:4,title:'標題3-1',parent_id:3,
                     children:[
                        {id:5,title:'標題4-1',parent_id:4}
                      ]}
                  ]},
                {id:6,title:'標題2-2',parent_id:2}
              ]
            }
           ],
           
   function flat(data){
            return data.reduce((pre,cur)=>{
                // console.log(cur);
                //此處將對象的children屬性和值都解構在空數組中，將對象的其他屬性和值都解構在i里面。
                const {children=[],...i}=cur;   // 注意 ...i 只能寫在解構賦值的末尾，否則報錯
                // console.log(i);
                // // console.log(children);
                return pre.concat([{...i}],flat(children))  //利用遞歸回調,數組合并,注意此處 {...i}是解構
            },[]);
        }
   console.log(flat(data));

這里用到了 es6解構賦值和不常用的 Array.reduce,文章講的不錯，可以去看看。

二. 再講將扁平化數據結構轉JSON樹狀形結構

思想都在步驟里了。

老規(guī)矩上代碼：

  //已知扁平化數據Arr
let Arr = [
            {id:1,title:'標題1',parent_id:0},
            {id:2,title:'標題2',parent_id:0},
            {id:3,title:'標題2-1',parent_id:2},
            {id:4,title:'標題3-1',parent_id:3},
            {id:5,title:'標題4-1',parent_id:4},
            {id:6,title:'標題2-2',parent_id:2},
          ];

     const result = []
     function fn(list){
          const remap = list.reduce((pre,cur)=>{  //###第一步：將數組轉換成鍵值對的形式(鍵是id值，值是對象)
                // console.log(cur);
               pre[cur.id]=cur
                // console.log(pre);
               return pre
           },{})
                //console.log(remap);
               //###第二步，循環(huán)遍歷數組，判斷是不是(樹狀結構最外層，祖宗層數據)第一層的數據(本處就是parent_id等不等于0)
            for(let item of list){  //用普通的for循環(huán)也行，但是用for in 不行,只能獲取數組的元素下標,或者對象的鍵
                console.log(item);
                if(item.parent_id===0){
                    result.push(item)
                    continue
                }
                // console.log(item.parent_id);
                // console.log(remap[item.parent_id]); //注意 obj[key] 就代表是對象的值value
                if(item.parent_id in remap) {   //換成else也可，目的將不是第一層的數據(parent_id不等于0)挑出來，并賦予一個children屬性
                    const parent = remap[item.parent_id];
                    parent.children = parent.children || []; 
                    // console.log(parent);
                    parent.children.push(item);
                    //console.log(parent);
                }
            }
            // console.log(result);
            return result
        }
      console.log(fn(Arr));

擴充一個知識點：for in 與 for of 的區(qū)別：

for-in結構對 Array（數組）和Object（對象）都可以使用，但只能拿到數組元素下標或者對象的鍵；

而for-of結構在對Object（對象）使用時會報錯，在數組是可以拿到數組元素。

const arr = [2,3,4]
const obj = {
    a:2,
    b:3,
    c:4
},

for (let item in arr){
    console.log(item);  // 0 , 1 , 2
}

for (let item of arr){
    console.log(item);  // 2 , 3 , 4
}

for (let item in obj){
    console.log(item)  // a ,b ,c
}

for (let item of obj ){
    console.log(item)  // Uncaught TypeError: arr is not iterable 
}