js flattening conversion to tree structure array 1. Flatten data ---- > tree structure
1. Flat data ---- > tree structure (data)
const data = [
{
id: 1, name: '小王' },
{
id: 12, name: '小黑', parentId: 1 },
{
id: 121, name: '小白', parentId: 12 },
{
id: 122, name: '小张', parentId: 12 },
{
id: 2, name: '小张' },
{
id: 22, name: '小刘', parentId: 2 },
{
id: 221, name: '小明', parentId: 22 },
{
id: 222, name: '小孙', parentId: 22 },
]
2. Flat data ---- > The tree structure code is as follows
1. Import library
1. The code is as follows (flat data ---- > tree structure 1 example):
/**
* 扁平化数据 ---- > 树形结构1
* @param pre: any, curr: any, i, arr
* @returns
*/
const newData11 = data.reduce(function (pre: any, curr: any, i, arr) {
curr.children = arr.filter(v => v.parentId === curr.id)
if (!curr.parentId) {
pre.push(curr)
}
return pre
}, [])
console.log('newData', newData11);
2. The code is as follows (flat data ---- > tree structure 2 example):
/**
* 扁平化数据 ---- > 树形结构2
* @param list
* @returns
*/
const listToTree = (list) => {
let info = list.reduce((map, node) => (map[node.id] = node, node.children = [], map), {
})
return list.filter(node => {
info[node.parentId] && info[node.parentId].children.push(node)
return !node.parentId
})
}
console.log('newData', listToTree(data));
3. The code is as follows (flat data ---- > tree structure 3 example):
/**
* 扁平化数据 ---- > 树形结构3
* @param data
* @returns
*/
function transTree(data) {
let result: any = []
let map = {
}
if (!Array.isArray(data)) {
//验证data是不是数组类型
return []
}
data.forEach(item => {
//建立每个数组元素id和该对象的关系
map[item.id] = item //这里可以理解为浅拷贝，共享引用
})
data.forEach(item => {
let parent = map[item.parentId] //找到data中每一项item的爸爸
if (parent) {
//说明元素有爸爸，把元素放在爸爸的children下面
(parent.children || (parent.children = [])).push(item)
} else {
//说明元素没有爸爸，是根节点，把节点push到最终结果中
result.push(item) //item是对象的引用
}
})
return result //数组里的对象和data是共享的
}
console.log(transTree(data))