使用 JavaScript 从平面数组构建树数组
javascriptweb developmentfront end technologyobject oriented programming更新于 2024/1/9 17:48:17
我们有一个复杂的 json 文件，必须使用 JavaScript 处理它以使其分层，以便稍后构建树。
JSON 数组的每个条目都有 −
id − 一个唯一的 id，
parentId − 父节点的 id(如果节点是树的根，则为 0)
level − 树中的深度级别
JSON 数据已经"有序"，这意味着一个条目将在其上方有一个父节点或兄弟节点，在其下方有一个子节点或兄弟节点。
输入数组是 −
const arr = [
{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": null
},
{
"id": "6",
"parentId": "12",
"text": "Boy",
"level": "2",
"children": null
},
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": null
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": null
},
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": null
}
];
预期输出为 −
const output = [
{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": [
{
"id": "6",
"parentId": "12",
"text": "Boy",
"level": "2",
"children": []
},
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": []
}
]
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": [
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": []
}
]
}
];
示例
其代码为 −
const arr = [
{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": null
},
{
"id": "6",
"parentId": "12",
"text": "Boy",
"level": "2",
"children": null
},
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": null
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": null
},
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": null
}
];
const listToTree = (arr = []) => {
let map = {}, node, res = [], i;
for (i = 0; i < arr.length; i += 1) {
map[arr[i].id] = i;
arr[i].children = [];
};
for (i = 0; i < arr.length; i += 1) {
node = arr[i];
if (node.parentId !== "0") {
arr[map[node.parentId]].children.push(node);
}
else {
res.push(node);
};
};
return res;
};
console.log(JSON.stringify(listToTree(arr), undefined, 4));
输出
控制台中的输出将是 −
[
{
"id": "12",
"parentId": "0",
"text": "Man",
"level": "1",
"children": [
{
"id": "6",
"parentId": "12",
"text": "Boy",
"level": "2",
"children": []
},
{
"id": "7",
"parentId": "12",
"text": "Other",
"level": "2",
"children": []
}
]
},
{
"id": "9",
"parentId": "0",
"text": "Woman",
"level": "1",
"children": [
{
"id": "11",
"parentId": "9",
"text": "Girl",
"level": "2",
"children": []
}
]
}
]
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
