相信有许多人曾被树形结构处理从而困扰过下面我就为大家分享一下，在工作中！常见的树形结构该怎么处理！
场景
首先肯定有三个数据 这里我就分为 大主题（第一层数据），小主题（第二层数据），商品（第三层数据） 这里就列举为三层数据吧！其实你搞懂了三层数据处理后，在多也是一样的！
首先你要知道三层数据肯定是有所关联的
那到底是咋样关联的呢？
其实懂点后端的伙伴！肯定知道是通过字段id关联的！
（后端同理就当下面下面数据为查出数据）
let bigCommodityData = [ { id:1, name:"大主题1" }, { id:2, name:"大主题2" }, { id:3, name:"大主题3" }, { id:4, name:"大主题4" } ]小主题是绑定在大主题上的，通过大主题的id小主题的每条数据可以增加字段对其进行绑定这里就以pid为例！假设pid：1就是绑定在大主题的第一条数据上的
这样就把小主题绑定在了大主题了上了 细心的小伙伴会发现字段sid是干嘛的？对的其实它就是我们用来绑定商品的sid:"0_0"前面的0就代表在第一个大主题上后面的0是代表商品绑定在小主题的第一个上（这里相对商品而言的）！
这样其实就绑定好了！这些就是树型结构的设计理念
现在我们要把数据给前端反出去！或者有的（坑比后端，不过关的后端）不会处理这种树形结构！会直接扔给前端让前端处理！再或者基于需求这种结构只能分开反！但前端有的时候合并该怎么办呢？
其实很简单我们直接来硬货！嵌套循环这样就可以了（三层for循环）！
话不多说直接上代码！ 如有不能理解的 请私聊我！我经常是这样处理的！或者大家有更好的方案更快捷的处理方式欢迎您的留言
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> <script> // 小主题数据 // SELECT id,name,sid,pid,name,subhead,img_url_grey,img_url_pink FROM pandora_small_themes ORDER BY sid , gmt_modified DESC // 大主题数据 // SELECT id,name,title,slogan,poster_slogan FROM pandora_big_themes // 首饰项链数据 // SELECT id,cid,item_id,sku,prize,url,name,name_detail,detail_url,diy_url,width,height,order_url,material,color,theme FROM pandora_goods ORDER BY cid ,priority, gmt_modified DESC 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", }, ] let bigCommodityData = [ { id:1, name:"大主题1" }, { id:2, name:"大主题2" }, { id:3, name:"大主题3" }, { id:4, name:"大主题4" } ] 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:"2_0", }, { id:6, name:"商品6", pid:3, cid:"2_1", }, { id:7, name:"商品7", pid:4, cid:"3_0", }, { id:8, name:"商品7", pid:4, cid:"3_1", }, ] let array = []; for (let i = 0; i < bigCommodityData.length; i++) { let array1 = bigCommodityData[i]; array1.children = []; array1.level = 1; array1.id = array1.id + ''; array.push(array1); for (let j = 0; j < smallCommodityData.length; j++) { if (bigCommodityData[i].id == smallCommodityData[j].pid) { let array2 = smallCommodityData[j]; array2.children = []; array2.level = 2; array2.id = array2.id + ''; array1.children.push(array2); for (let k = 0; k < goodsData.length; k++) { if (goodsData[k].cid == smallCommodityData[j].sid) { let array3 = goodsData[k]; array3.level = 3; array3.id = array3.id + ''; array2.children.push(array3); } } } } } console.log(array); </script>