js 遞歸取到多層chilren中的數據 vue

處理后台返回的樹形結構數據

需求：只展示一級類目名，及下面所有標簽（同級展示）

data(){
        return{
             originData:[ //1.后台返回的數據結構
                {id:0,
                 categoryName:"類目1",
                 children:[
                            {Iid:0,labelName:"標簽名1"},
                            {Iid:1,labelName:"標簽名2"},
                          ]
                 },
                {id:1,
                 categoryName:"類目2",
                 children:[
                            {Iid:3,labelName:"標簽名3"},
                            {
                                children:[
                                    {Iid:4,labelName:"標簽名4"}
                                ]
                            },
                          ],
                
                },
                {id:2,
                 categoryName:"類目3",
                 children:[
                            {id:6,labelName:"標簽名5"},
                            {id:7,
                             children:[
                                 {Iid:5,labelName:"標簽名6"},
                                 {children:[
                                     {
                                         children:{Iid:6,labelName:"標簽名7"}
                                     }
                                 ]},
                             ]
                            },
                          ],
                
                },  
            ],
            // 2.想要的數據結構(頁面要展示需要的)
            wantData:[
                {
                    categoryName:'類目名1',
                    labelList:[{Iid:0,labelName:"標簽名1"},{Iid:1,labelName:"標簽名2"}]
                },
                {
                    categoryName:'類目名2',
                    labelList:[{Iid:2,labelName:"標簽名3"},{Iid:3,labelName:"標簽名4"}]
                },
                {
                    categoryName:'類目名3',
                    labelList:[{Iid:4,labelName:"標簽名5"},{Iid:5,labelName:"標簽名6"}]
                },
            ]

        }
    },

第一種方法：多層循環遍歷（局限：只能循環固定的層數）

 
        HandleLabelData(originData){
            let obj = {}
            let arr = []
            originData.forEach(item => {
                 obj={categoryName:"",labelList:[]}
                 obj.categoryName = item.categoryName
                 if(item.children.length){
                     item.children.forEach(item1=>{
                         if(!item1.children){
                             arr.push(item1)
                         }else{
                             item1.children.forEach(item2=>{
                                 if(!item2.children){
                                     arr.push(item2)
                                 }else{
                                     item2.children.forEach(item3=>{
                                         if(!item3.children){
                                             arr.push(item3)
                                         }else{
                                             arr = arr.concat(item3.children)  //只能循環3層
                                         }
                                     })
                                     
                                 }
                                 
                             })
                         }
                     })
                 }
                 obj.labelList = list
                 this.wantData.push(obj)
             }); 

        },

第二種方法：遞歸

 HandleLabelData(originData){
             let obj = {}
             originData.forEach(item => {
                 obj={categoryName:"",labelList:[]}
                 obj.categoryName = item.categoryName
                 this.diguiData(item,obj.labelList)
                 this.wantData.push(obj)
             });  
        },
diguiData(originItem,labelList){
            if(originItem.children&&originItem.children.length>0){
                originItem.children.forEach(item=>{
                    this.diguiData(item,labelList)
                })
  }
  delete originItem.children;
  labelList.push(originItem)
  }