需求：
1淹辞、把如下數(shù)據(jù)按照parent_id等于id的規(guī)則建立父子關(guān)系
2、同一層級(jí)的數(shù)組按照order升序
[ { "id": 1, "name": "estate", "title": "物業(yè)管理", "type": "nav", "leave": 1, "order": 1, "parent_id": 0, "url": "/estate" },
{ "id": 2, "name": "house", "title": "費(fèi)用管理", "type": "nav", "leave": 2, "order": 1, "parent_id": 1, "url": "estate" },
{ "id": 3, "name": "temporaryCharges", "title": "臨時(shí)收費(fèi)", "type": "nav", "leave": 3, "order": 1, "parent_id": 2, "url": "charge" },
{ "id": 4, "name": "propertyFees", "title": "物業(yè)費(fèi)", "type": "nav", "leave": 3, "order": 2, "parent_id": 2, "url": "propertyFees" },
{ "id": 6, "name": "propertyFeesEdit", "title": "編輯", "type": "handle", "leave": 4, "order": 2, "parent_id": 4, "url": null },
{ "id": 7, "name": "propertyFeesLogs", "title": "記錄", "type": "handle", "leave": 4, "order": 3, "parent_id": 4, "url": null },
{ "id": 8, "name": "propertyFeesPayment", "title": "繳費(fèi)", "type": "handle", "leave": 4, "order": 4, "parent_id": 4, "url": null },
{ "id": 9, "name": "carFees", "title": "停車費(fèi)", "type": "nav", "leave": 3, "order": 3, "parent_id": 2, "url": "carFees" },
{ "id": 11, "name": "carFeesLogs", "title": "記錄", "type": "handle", "leave": 4, "order": 2, "parent_id": 9, "url": null },
{ "id": 12, "name": "carFeesPayment", "title": "繳費(fèi)", "type": "handle", "leave": 4, "order": 3, "parent_id": 9, "url": null },
{ "id": 13, "name": "gain", "title": "固定收益", "type": "nav", "leave": 3, "order": 4, "parent_id": 2, "url": "gain" },
{ "id": 14, "name": "bill", "title": "賬單管理", "type": "nav", "leave": 2, "order": 2, "parent_id": 1, "url": "estate" },
......]
最終效果：
[{
"id": 1,
"name": "estate",
"title": "物業(yè)管理",
"type": "nav",
"leave": 1,
"order": 1,
"parent_id": 0,
"url": "/estate",
"children": [{
"id": 2,
"name": "house",
"title": "費(fèi)用管理",
"type": "nav",
"leave": 2,
"order": 1,
"parent_id": 1,
"url": "estate",
"children": [{
"id": 3,
"name": "temporaryCharges",
"title": "臨時(shí)收費(fèi)",
"type": "nav",
"leave": 3,
"order": 1,
"parent_id": 2,
"url": "charge"
}, {
"id": 4,
"name": "propertyFees",
"title": "物業(yè)費(fèi)",
"type": "nav",
"leave": 3,
"order": 2,
"parent_id": 2,
"url": "propertyFees",
"children": [{
"id": 6,
"name": "propertyFeesEdit",
"title": "編輯",
"type": "handle",
"leave": 4,
"order": 2,
"parent_id": 4,
"url": null
}, {
"id": 7,
"name": "propertyFeesLogs",
"title": "記錄",
"type": "handle",
"leave": 4,
"order": 3,
"parent_id": 4,
"url": null
}
.......
}
}]
實(shí)現(xiàn)代碼：
'use strict';
exports.formatRouter = {
/**
* 樹形數(shù)據(jù)格式化竭翠，其中：
* 子級(jí)的’parent_id‘等于父級(jí)的id,
* 最高父級(jí)的id為0
*
* 排序規(guī)則為‘order’的數(shù)字順序
* */
treeData(data) {
// 對(duì)源數(shù)據(jù)深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// filter嵌套filter相當(dāng)于for循環(huán)嵌套for循環(huán)
const result = cloneData.filter(parent => {
// 返回每一項(xiàng)的子級(jí)數(shù)組
const branchArr = cloneData.filter(child => parent.id === child.parent_id);
// 若子級(jí)存在振坚，則給子級(jí)排序；且斋扰，賦值給父級(jí)
if (branchArr.length > 0) {
branchArr.sort(this.compare('order'));
parent.children = branchArr;
}
// 返回最高的父級(jí)渡八，即，parent_id為0传货，
return parent.parent_id === 0;
});
// 給最高級(jí)的父級(jí)排序
result.sort(this.compare('order'));
return result;
},
// 對(duì)象數(shù)組排序
compare(property) {
return function(a, b) {
const value1 = a[property];
const value2 = b[property];
return value1 - value2;// 升序,降序?yàn)関alue2 - value1
};
},
};
說明：
其實(shí)就是兩個(gè)for循環(huán)嵌套屎鳍，性能上還沒有for循環(huán)好。
