I interviewed more than a dozen advanced front-ends, but I couldn’t even write (flat data structure to Tree)? ? ?
I saw an interesting interview question on the Internet. Tried playing it myself.
Let's look at the topic: the data content of the tie is as follows:
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},
]
output result
[
{
"id": 1,
"name": "部门1",
"pid": 0,
"children": [
{
"id": 2,
"name": "部门2",
"pid": 1,
"children": []
},
{
"id": 3,
"name": "部门3",
"pid": 1,
"children": [
// 结果 ,,,
]
}
]
}
]
Our requirements are very simple, so we don't need to consider performance issues first. Just realize the function.
The blogger said that this is a written test question for interviewing senior front-end development engineers. And only one or two classmates made it out of a dozen people. Feeling a little surprised.
Next, I will paste my code:
let newArr = [];
for (let i = 0; i < arr.length; i++) {
let thid = arr[i].id;
let children = [];
for (let k = i; k < arr.length; k++) {
if (arr[k].pid == thid) {
//如果当前的元素的pid等于上一层的id那么就拼合数组
children.push(arr[k]);
// arr[i].children.push(arr[k]);
}
if (arr.length - k == 1 && children.length > 0) {
let larr = arr[i];
larr.children = children;
newArr.push(larr);
// arr[i].children=children;
} else if (arr.length - k == 1 && children.length == 0) {
newArr.push(arr[i]);
}
}
}
console.log(newArr);
My idea is relatively simple. After getting the data, I don’t consider the first element of the array. The first element cannot be compared upwards, so I start comparing directly from the second element of the array; when the pid is equal to the id of the previous element, it is the previous element. child elements, you can start assembling a new array.
One problem encountered in this process is the problem of shallow copy.
In that case, it is not the desired output result of the above topic. Shallow copy and deep copy can be Baidu by yourself.
The next step is to deal with this BUG:
let newArr = [];
for (let i = 0; i < arr.length; i++) {
let thid = arr[i].id;
let children = [];
for (let k = i; k < arr.length; k++) {
if (arr[k].pid == thid) {
//如果当前的元素的pid等于上一层的id那么就拼合数组
children.push(arr[k]);
// arr[i].children.push(arr[k]);
}
if (arr.length - k == 1 && children.length > 0) {
let larr = Object.assign({
}, arr[i]);
larr.children = children;
newArr.push(larr);
// arr[i].children=children;
} else if (arr.length - k == 1 && children.length == 0) {
newArr.push(Object.assign({
}, arr[i]));
}
}
}
console.log(newArr);
The original text is more detailed than what I said, if you are interested, you can check it yourself
[1]: https://juejin.cn/post/6983904373508145189