本文主要讲解关于JS实现扁平数据和树状数据相互转换相关内容，让我们来一起学习下吧！

前言

平时处理数据就经常要处理树状和平面结构数据的转化，所以就写来记一下，方便下次用直接copy，用的都是比较笨重的方法，大家要是还有其他好的方法可以分享就太感谢了

树状转扁平数据

方法一

正向深入，顺着树的方向一级级下钻，先讲父级元素添加到准备号的数组里面，如果有子级就继续深下直到不能下去
得到的数据就是顺着树方向来的,得到的数据大概是这样子的1_1，1_1_1，1_1_2，…（也可以反向下钻，将resultArr.push(val)语句放到判断的后面，得到的顺序大概是这样的1_1_1，1_1_2，1_1…）

 const arr = [ { id: '1', name: '1_1', children: [ { id: 'a', name: '1_1_1' }, { id: 'b', name: '1_1_2' }, ] }, { id: '2', name: '2_2', children: [ { id: 'a', name: '2_2_2' } ] } ] const resultArr = [] function treeToData(data) { data.map(val => { resultArr.push(val) if (val.children && val.children.length > 0) { treeToData(val.children) delete val.children } }) return resultArr; } console.log(treeToData(arr)); 

方法二

使用reduce的累加，将遍历好的数据放在account里面，一开始account没有数据，所以是空数组，将当前的数据添加进来，判断有没有子级，有就递归调用方法，将返回来的数据合并

 const arr = [ { id: '1', name: '1_1', children: [ { id: 'a', name: '1_1_1' }, { id: 'b', name: '1_1_2' }, ] }, { id: '2', name: '2_2', children: [ { id: 'a', name: '2_2_2' } ] } ] function treeToData(data, parentId = null) { return data.reduce((account, current) => { account.push({ ...current, parentId }) if (current.children) { account = account.concat(treeToData(current.children, current.id)) } return account }, []) } console.log(treeToData(arr)); 

方法三

方法三和方法二比较像，只是换一种遍历

 const arr = [ { id: '1', name: '1_1', children: [ { id: 'a', name: '1_1_1' }, { id: 'b', name: '1_1_2' }, ] }, { id: '2', name: '2_2', children: [ { id: 'a', name: '2_2_2' } ] } ] function treeToData(data, parentId = null) { let resultArr = [] for (let i = 0; i < data.length; i++) { resultArr.push({ ...data[i], parentId }) if (data[i].children) { resultArr = resultArr.concat(treeToData(data[i].children, data[i].id)) } } return resultArr } console.log(treeToData(arr)); 

扁平数据转树状

方法一

先判断是不是父级，定义一个中间变量存储该数据，如果是就递归拿到所有的子级挂载在这个临时变量上，最后将临时变量添加到最终结果上

 const arr = [ { id: '1', name: '1_1', parentId: null }, { id: '2', name: '1_1_1', parentId: '1' }, { id: '2', name: '1_1_2', parentId: '1' }, { id: '3', name: '1_2', parentId: null }, { id: '4', name: '1_2_1', parentId: '3' }, { id: '5', name: '1_2_1_1', parentId: '4' } ] function dataToTree(data, parentId) { const resultArr = [] let temp; for (let i = 0; i < data.length; i++) { if (data[i].parentId === parentId) { const obj = data[i]; temp = dataToTree(data, data[i].id); if (temp.length > 0) { obj.children = temp; } resultArr.push(obj); } } return ersultArr; } console.log(dataToTree(arr, null)); 

方法二

使用 filter() 函数过滤出所有的父节点，，再使用map去构造子节点，并且递归填充子节点

 const arr = [ { id: '1', name: '1_1', parentId: null }, { id: '2', name: '1_1_1', parentId: '1' }, { id: '2', name: '1_1_2', parentId: '1' }, { id: '3', name: '1_2', parentId: null }, { id: '4', name: '1_2_1', parentId: '3' }, { id: '5', name: '1_2_1_1', parentId: '4' } ] function dataToTree(data, parentId) { const children = data.filter(val => val.parentId === parentId) if (!children) { return null } return children.map(item => ( { ...item, children: dataToTree(data, item.id) } )); } console.log(dataToTree(arr, null)); 

以上就是关于JS实现扁平数据和树状数据相互转换相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.frpkj.com），学习愉快哦！