JavaScript扁平数据转tree与tree数据扁平化的方法
导读：本文共3171.5字符，通常情况下阅读需要11分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 一、写在前面有时我们拿到的数据的数据结构可能不是理想的，那么此时就要求前端程序员，具有改造数据的能力。例如拿到扁平的数据， 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中，这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构。总之就是说，提供数据的接口给到的数据，未必符合要求，而当我们又无法令他人为为我们改变时，需求和要... ...
音频解说
目录
(为您整理了一些要点),点击可以直达。一、写在前面
有时我们拿到的数据的数据结构可能不是理想的，那么此时就要求前端程序员，具有改造数据的能力。例如拿到扁平的数据， 但我们要应用在 tree 树形组件或 Cascader 级联选择器组件中，这样的组件要求数据结构是非扁平的的具有层级递进关系的 tree 结构。
总之就是说，提供数据的接口给到的数据，未必符合要求，而当我们又无法令他人为为我们改变时，需求和要求就来到了前端程序员这里， 所以得具备这样的数据处理能力。
下面是将举两个数据改造的例子：
一是扁平化，具有层级递进关系的 tree 数据，转换为扁平结构的的 flat 数据
二是反扁平化，扁平结构的 flat 数据，转换为具有层级递进关系的 tree 数据
二、正文部分
2.1 扁平数据转为 tree 数据
扁平化函数
/***扁平化：将具有层级递进关系结构的tree数据扁平化**@paramtreeList有层级递进关系结构的tree数据*@paramflatList用于接收扁平化结果的变量*@returns{*}返回扁平化结果*/functiontreeToFlat(treeList,flatList){//flatList.length>9999是考虑底线保护原则，出于极限保护的目的设置的，可不设或按需设置。if(flatList.length>9999){return}treeList.map(e=>{flatList.push(e)//递归：有条件的自己调用自己，条件是e.children.length为真if(e.children&&e.children.length){treeToFlat(e.children,flatList)}})//console.log('扁平化后：',flatList)returnflatList}2.2 tree 数据转为扁平数据
反扁平化函数
/***反扁平化：将扁平结构的flat数据转换为具有层级递进关系结构的tree数据**@paramflatList扁平结构的数据*@paramtreeList用于接收反扁平化结果的变量*@returns{*}返回反扁平化结果*/functionflatToTree(flatList,treeList){flatList.map(e=>{//以e.pid===null,作为判断是不是根节点的依据，或者直接写死根节点（如果确定的话），//具体以什么作为判断根节点的依据，得看数据的设计规则，通常是判断层级或是否代表根节点的标记if(e.pid===null){//避免出现重复数据constindex=treeList.findIndex(sub=>sub.id===e.id)if(index===-1){treeList.push(e)}}flatList.map(e2=>{if(e2.pid===e.id){//避免出现重复数据constindex=e.children.findIndex(sub=>sub.id===e2.id)if(index===-1){e.children.push(e2)}}})})2.3 完整测试 demo
demo 测试结果截图如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>扁平数据转tree与tree数据扁平化Demo</title></head><body><h2>扁平数据转tree与tree数据扁平化</h2><script>window.onload=function(){test()}functiontest(){letflatList=[],treeList=[{id:1,pid:null,label:'第一层',value:'1',children:[{id:2,pid:1,label:'第二层1',value:'2.1',children:[]},{id:3,pid:1,label:'第二层2',value:'2.2',children:[]},{id:4,pid:1,label:'第二层3',value:'2.3',children:[{id:5,pid:4,label:'第三层1',value:'3.1',children:[]},{id:6,pid:4,label:'第三层2',value:'3.2',children:[]},]},]}]console.log('原始tree数据：',JSON.parse(JSON.stringify(treeList)))//扁平化console.log('tree=>flat，扁平化后：',treeToFlat(JSON.parse(JSON.stringify(treeList)),flatList))//反扁平化，SON.parse(JSON.stringify())为了实现深拷贝console.log('flat=>tree，反扁平化后：',flatToTree(JSON.parse(JSON.stringify(flatList)),treeList))}/***扁平化：将具有层级递进关系结构的tree数据扁平化**@paramtreeList有层级递进关系结构的tree数据*@paramflatList用于接收扁平化结果的变量*@returns{*}返回扁平化结果*/functiontreeToFlat(treeList,flatList){//flatList.length>9999是考虑底线保护原则，出于极限保护的目的设置的，可不设或按需设置。if(flatList.length>9999){return}treeList.map(e=>{flatList.push(e)//递归：有条件的自己调用自己，条件是e.children.length为真if(e.children&&e.children.length){treeToFlat(e.children,flatList)}})//console.log('扁平化后：',flatList)returnflatList}/***反扁平化：将扁平结构的flat数据转换为具有层级递进关系结构的tree数据**@paramflatList扁平结构的数据*@paramtreeList用于接收反扁平化结果的变量*@returns{*}返回反扁平化结果*/functionflatToTree(flatList,treeList){flatList.map(e=>{//以e.pid===null,作为判断是不是根节点的依据，或者直接写死根节点（如果确定的话），//具体以什么作为判断根节点的依据，得看数据的设计规则，通常是判断层级或是否代表根节点的标记if(e.pid===null){//避免出现重复数据constindex=treeList.findIndex(sub=>sub.id===e.id)if(index===-1){treeList.push(e)}}flatList.map(e2=>{if(e2.pid===e.id){//避免出现重复数据constindex=e.children.findIndex(sub=>sub.id===e2.id)if(index===-1){e.children.push(e2)}}})})//console.log('反扁平化后：',treeList)returntreeList}</script></body></html> </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">本文：
JavaScript扁平数据转tree与tree数据扁平化的方法的详细内容，希望对您有所帮助，信息来源于网络。