JavaScript 陣列按級別排序
我們在同一個陣列中擁有具有多對一關係的資料。該組織由級別建立。某個元素的父元素始終比其本身高一個級別,並由 parentId 引用。
我們要求從該陣列中獲取多級陣列。級別最高的元素將作為主陣列,其子元素作為子陣列。
如果給定的輸入陣列為:
const arr = [
{
_id: 100,
level: 3,
parentId: null,
},
{
_id: 101,
level: 2,
parentId: 100,
},
{
_id: 102,
level: 2,
parentId: 100,
},
{
_id: 103,
level: 2,
parentId: 100,
},
{
_id: 104,
level: 1,
parentId: 101,
},
{
_id: 105,
level: 1,
parentId: 102,
},
{
_id: 106,
level: 1,
parentId: 101,
},
{
_id: 107,
level: 1,
parentId: 103,
},
{
_id: 108,
level: 1,
parentId: 102,
},
{
_id: 109,
level: 1,
parentId: 103,
}
];然後輸出結構應如下所示:
100 | ------------------------------------ | | | 101 102 103 ------- ------ ------ | | | | | | 104 106 105 108 107 109
示例
該程式碼將是:
const arr = [{
_id: 100,
level: 3,
parentId: null,
},
{
_id: 101,
level: 2,
parentId: 100,
},
{
_id: 102,
level: 2,
parentId: 100,
},
{
_id: 103,
level: 2,
parentId: 100,
},
{
_id: 104,
level: 1,
parentId: 101,
},
{
_id: 105,
level: 1,
parentId: 102,
},
{
_id: 106,
level: 1,
parentId: 101,
},
{
_id: 107,
level: 1,
parentId: 103,
},
{
_id: 108,
level: 1,
parentId: 102,
},
{
_id: 109,
level: 1,
parentId: 103,
}];
const prepareTree = (arr = [], root = null) => {
let res;
const obj = Object.create(null);
arr.forEach(el => {
el.children = obj[el._id] && obj[el._id].children;
obj[el._id] = el;
if (el.parentId === root) {
res = el;
}
else {
obj[el.parentId] = obj[el.parentId] || {};
obj[el.parentId].children = obj[el.parentId].children || [];
obj[el.parentId].children.push(el);
}
});
return res;
};
console.log(JSON.stringify(prepareTree(arr), undefined, 4));輸出
控制檯中的輸出將為:
{
"_id": 100,
"level": 3,
"parentId": null,
"children": [
{
"_id": 101,
"level": 2,
"parentId": 100,
"children": [
{
"_id": 104,
"level": 1,
"parentId": 101
},
{
"_id": 106,
"level": 1,
"parentId": 101
}
]
},
{
"_id": 102,
"level": 2,
"parentId": 100,
"children": [
{
"_id": 105,
"level": 1,
"parentId": 102
},
{
"_id": 108,
"level": 1,
"parentId": 102
}
]
},
{
"_id": 103,
"level": 2,
"parentId": 100,
"children": [
{
"_id": 107,
"level": 1,
"parentId": 103
},
{
"_id": 109,
"level": 1,
"parentId": 103
}
]
}
]
}
廣告
資料結構
網路
RDBMS
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP