看到这样一个题目:
将以下数据按要求输出:
let arr = [
{id: 1, name: '部门1', pid: 0},
{id: 2, name: '部门2', pid: 1},
{id: 3, name: '部门3', pid: 1},
{id: 4, name: '部门4', pid: 3},
{id: 5, name: '部门5', pid: 4},
]
————————————————
输出结果:
[
{
"id": 1,
"name": "部门1",
"pid": 0,
"children": [
{
"id": 2,
"name": "部门2",
"pid": 1,
"children": []
},
{
"id": 3,
"name": "部门3",
"pid": 1,
"children": [
// 结果 ,,,
]
}
]
}
]
下面是记录一下各个不同的解决方法:
不考虑性能实现,递归遍历查找
主要思路是提供一个递getChildren
的方法,该方法递归去查找子集。
/**
* 递归查找,获取children
*/
const getChildren = (data, result, pid) => {
for (const item of data) {
if (item.pid === pid) {
const newItem = {...item, children: []};
result.push(newItem);
getChildren(data, newItem.children, item.id);
}
}
}
/**
* 转换方法
*/
const arrayToTree = (data, pid) => {
const result = [];
getChildren(data, result, pid)
return result;
}
通过遍历,不用递归
主要思路是先把数据转成Map
去存储,之后遍历的同时借助对象的引用,直接从Map
找对应的数据做存储。
function arrayToTree(items) {
const result = []; // 存放结果集
const itemMap = {}; //
// 先转成map存储
for (const item of items) {
itemMap[item.id] = {...item, children: []}
}
for (const item of items) {
const id = item.id;
const pid = item.pid;
const treeItem = itemMap[id];
if (pid === 0) {
result.push(treeItem);
} else {
if (!itemMap[pid]) {
itemMap[pid] = {
children: [],
}
}
itemMap[pid].children.push(treeItem)
}
}
return result;
}
最优性能
主要思路也是先把数据转成Map
去存储,之后遍历的同时借助对象的引用,直接从Map
找对应的数据做存储。不同点在遍历的时候即做Map存储,有找对应关系。性能会更好。
function arrayToTree(items) {
const result = []; // 存放结果集
const itemMap = {}; //
for (const item of items) {
const id = item.id;
const pid = item.pid;
if (!itemMap[id]) {
itemMap[id] = {
children: [],
}
}
itemMap[id] = {
...item,
children: itemMap[id]['children']
}
const treeItem = itemMap[id];
if (pid === 0) {
result.push(treeItem);
} else {
if (!itemMap[pid]) {
itemMap[pid] = {
children: [],
}
}
itemMap[pid].children.push(treeItem)
}
}
return result;
}
从上面的代码我们分析,一次循环就搞定了,该实现的时间复杂度为O(n)
,需要一个Map
把数据存储起来,空间复杂度O(n)
。
自己实践的效果:
1 写一个js方法库,放进去方法
export function getChildren(data, result, pid) {
for (const item of data) {
if (item.pid === pid) {
const newItem = {
...item,
children: []
};
result.push(newItem);
getChildren(data, newItem.children, item.id);
}
}
}
/**
* 转换方法
*/
export function arrayToTree0(data, pid) {
const result = [];
getChildren(data, result, pid)
return result;
}
export function arrayToTree1(items) {
const result = []; // 存放结果集
const itemMap = {}; //
// 先转成map存储
for (const item of items) {
itemMap[item.id] = {...item, children: []}
}
for (const item of items) {
const id = item.id;
const pid = item.pid;
const treeItem = itemMap[id];
if (pid === 0) {
result.push(treeItem);
} else {
if (!itemMap[pid]) {
itemMap[pid] = {
children: [],
}
}
itemMap[pid].children.push(treeItem)
}
}
return result;
}
2,在页面引入
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
import { arrayToTree0,arrayToTree1 } from "../js.js";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
arr: [
{ id: 1, name: "部门1", pid: 0 },
{ id: 2, name: "部门2", pid: 1 },
{ id: 3, name: "部门3", pid: 1 },
{ id: 4, name: "部门4", pid: 3 },
{ id: 5, name: "部门5", pid: 4 },
],
};
},
methods: {
arrayToTreeFun() {
console.log(arrayToTree0(this.arr,this.arr[0].pid),arrayToTree1(this.arr));
},
},
mounted(){
this.arrayToTreeFun()
}
};
</script>
<style scoped>
</style>
3结果输出树形数据