「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。
日常开发中我们会接触到需要数据渲染的树形结构，当我们发起请求拿到的数据并不是完整的树形数据，那么就需要我们进行加工处理再使用。在我们拿到数据之后，需要把数组转化成树形结构，那么我就就可以使用以下的三种方法
拿到的数据
let arr = [
{ Id: 1, name: '数据1', parentId: null },
{ Id: 2, name: '数据1-1', parentId: 1 },
{ Id: 3, name: '数据1-1-1', parentId: 2 },
{ Id: 4, name: '数据1-2', parentId: 1 },
{ Id: 5, name: '数据2', parentId: numll },
{ Id: 6, name: '数据2-1', parentId: 5 }
]
一、递归
export function transArray(arr) {
// 循环遍历
var newArr = [] // 专门收集转化后的数组
arr.forEach((item) => {
// 1-先要找第一层
if (item.parentId === parentId) {
// 3-收集非一级
var child = transArray2(arr, item.Id)
if (child.length) {
// 有长度表示可以收集到二级
item.children = child
}
// 2-收集筛选出来的一级
newArr.push(item)
}
})
return newArr
}
二、下包 array-to-tree
import arrayToTree from 'array-to-tree'
export function transArray(arr) {
return arrayToTree(arr, {
parentProperty: 'parentId',
customID: 'Id'
})
}
三、循环
// 把平铺的数组数据转成树形结构
export function tranListToTreeData(list) {
// 定义两个变量来
const treeList = [] // 存储新数组
const map = {} // 存储子数据
list.forEach(item => {
// 如果没有children这个属性，就添加这个属性
if (!item.children) {
item.children = []
}
// 把数据用对应的id存储起来
// console.log(item)
map[item.id] = item
})
// console.log(map)
list.forEach(item => {
// 如果有parentId就证明有父级，parentId就是父级的id，可以在map中通过id找到父级，并在父级中的children中添加子级
if (item.parentId) {
if (item.parentId === '-1') return
// console.log(item.parentId)
map[item.parentId].children.push(item)
} else {
// 如果没有parentId就证明是父级，就直接添加到treeList中
treeList.push(item)
}
})
return treeList
}
加油加油！！
努力学习！！
