js treeData 樹形資料結構 無限層級(轉載)

js實作無限層級樹形資料結構（創新算法）
 
由于做項目的需要，把一個線性數組轉成樹形數組，在網上查了很多文章，覺得他們寫的太複雜了，于是自己寫了一個，在折騰了一下午終于把它寫出來啦（激動.gif），用兩個filter過濾器就搞定了，代碼簡潔明了，資料結構小白都能看懂。

js代碼：把線性資料轉成樹形資料
function setTreeData(data){
    let cloneData = JSON.parse(JSON.stringify(data))    // 對源資料深度克隆
    let tree = cloneData.filter((father)=>{              //循環所有項
        let branchArr = cloneData.filter((child)=>{
            return father.id == child.parentId      //傳回每一項的子級數組
        });
        if(branchArr.length>0){
            father.children = branchArr;    //如果存在子級，則給父級添加一個children屬性，并指派
        }
        return father.parentId==0;      //傳回第一層
    });
    return tree     //傳回樹形資料
}
根據網友給我指出的問題，之前的算法會影響到源資料，之後我對擷取的資料進行了深度克隆，完美解決。

執行個體1：使用element-ui的元件制作一個樹形多級嵌套伸縮菜單欄


vue元件：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    accordion
    @node-click="handleNodeClick">
  </el-tree>
</template>
 
<script>
    export default {
        name: "Test",
      data(){
        return {
          data : [
            {id:1,parentId:0,name:"一級菜單A",rank:1},
            {id:2,parentId:0,name:"一級菜單B",rank:1},
            {id:3,parentId:0,name:"一級菜單C",rank:1},
            {id:4,parentId:1,name:"二級菜單A-A",rank:2},
            {id:5,parentId:1,name:"二級菜單A-B",rank:2},
            {id:6,parentId:2,name:"二級菜單B-A",rank:2},
            {id:7,parentId:4,name:"三級菜單A-A-A",rank:3},
            {id:8,parentId:7,name:"四級菜單A-A-A-A",rank:4},
            {id:9,parentId:8,name:"五級菜單A-A-A-A-A",rank:5},
            {id:10,parentId:9,name:"六級菜單A-A-A-A-A-A",rank:6},
            {id:11,parentId:10,name:"七級菜單A-A-A-A-A-A-A",rank:7},
            {id:12,parentId:11,name:"八級菜單A-A-A-A-A-A-A-A",rank:8},
            {id:13,parentId:12,name:"九級菜單A-A-A-A-A-A-A-A-A",rank:9},
            {id:14,parentId:13,name:"十級菜單A-A-A-A-A-A-A-A-A-A",rank:10},
          ],
          defaultProps: {
            children: 'children',
            label: 'name'
          }
        }
      },
      computed:{
        treeData(){
          let cloneData = JSON.parse(JSON.stringify(this.data))    // 對源資料深度克隆
          let tree = cloneData.filter((father)=>{              //循環所有項
            let branchArr = cloneData.filter((child)=>{
              return father.id == child.parentId      //傳回每一項的子級數組
            });
            if(branchArr.length>0){
              father.children = branchArr;    //如果存在子級，則給父級添加一個children屬性，并指派
            }
            return father.parentId==0;      //傳回第一層
          });
          return tree     //傳回樹形資料
        }
      },
      methods:{
        handleNodeClick(data){
          // console.log(data)
          console.log(this.treeData)
        }
      },
      mounted(){
      }
    }
</script>
 
<style scoped>
 
</style>      

顯示效果：

樹立目标，保持活力，gogogo！