前后端三层双层（多层）树形结构处理

前后端树形结构处理----设计理念

相信有许多人曾被树形结构处理从而困扰过下面我就为大家分享一下，在工作中！常见的树形结构该怎么处理！

场景

首先肯定有三个数据 这里我就分为 大主题（第一层数据），小主题（第二层数据），商品（第三层数据） 这里就列举为三层数据吧！其实你搞懂了三层数据处理后，在多也是一样的！

首先你要知道三层数据肯定是有所关联的

那到底是咋样关联的呢？

其实懂点后端的伙伴！肯定知道是通过字段id关联的！

（1）假设大主题 总共有四条如下

（后端同理就当下面下面数据为查出数据）

let bigCommodityData = [
    {
   
        id:1,
        name:"大主题1"
    },
    {
   
        id:2,
        name:"大主题2"
    },
    {
   
        id:3,
        name:"大主题3"
    },
    {
   
        id:4,
        name:"大主题4"
    }
]

小主题是绑定在大主题上的，通过大主题的id小主题的每条数据可以增加字段对其进行绑定这里就以pid为例！假设pid：1就是绑定在大主题的第一条数据上的

（2）假设小主题 总共有8条如下

    let smallCommodityData = [
    {
   
        id:1,
        name:"小主题1",
        pid:1,
        sid:"0_0",
    },
    {
   
        id:2,
        name:"小主题2",
        pid:1,
        sid:"0_1",
    },
    {
   
        id:3,
        name:"小主题3",
        pid:2,
        sid:"1_0",
    },
    {
   
        id:4,
        name:"小主题4",
        pid:2,
        sid:"1_1",
    },
    {
   
        id:5,
        name:"小主题5",
        pid:3,
        sid:"2_0",
    },
    {
   
        id:6,
        name:"小主题6",
        pid:3,
        sid:"2_1",
    },
    {
   
        id:7,
        name:"小主题7",
        pid:4,
        sid:"3_0",
    },
    {
   
        id:8,
        name:"小主题8",
        pid:4,
        sid:"3_1",
    },

]

这样就把小主题绑定在了大主题了上了 细心的小伙伴会发现字段sid是干嘛的？对的其实它就是我们用来绑定商品的sid:"0_0"前面的0就代表在第一个大主题上后面的0是代表商品绑定在小主题的第一个上（这里相对商品而言的）！

（3）假设商品总共有8条如下

let goodsData = [
    {
   
        id:1,
        name:"商品1",
        cid:"0_0",
    },
    {
   
        id:2,
        name:"商品2",
        cid:"0_1"
    },
    {
   
        id:3,
        name:"商品3",
        cid:"1_0",
    },
    {
   
        id:4,
        name:"商品4",
        cid:"1_1",
    },
    {
   
        id:5,
        name:"商品5",
        pid:4,
        cid