js格式化樹形數據（扁平化數據）

需求：

1、把如下數據按照parent_id等於id的規則建立父子關系
2、同一層級的數組按照order升序

[ { "id": 1, "name": "estate", "title": "物業管理", "type": "nav", "leave": 1, "order": 1, "parent_id": 0, "url": "/estate" },
 { "id": 2, "name": "house", "title": "費用管理", "type": "nav", "leave": 2, "order": 1, "parent_id": 1, "url": "estate" },
 { "id": 3, "name": "temporaryCharges", "title": "臨時收費", "type": "nav", "leave": 3, "order": 1, "parent_id": 2, "url": "charge" }, 
{ "id": 4, "name": "propertyFees", "title": "物業費", "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": "繳費", "type": "handle", "leave": 4, "order": 4, "parent_id": 4, "url": null },
 { "id": 9, "name": "carFees", "title": "停車費", "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": "繳費", "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": "物業管理",
	"type": "nav",
	"leave": 1,
	"order": 1,
	"parent_id": 0,
	"url": "/estate",
	"children": [{
		"id": 2,
		"name": "house",
		"title": "費用管理",
		"type": "nav",
		"leave": 2,
		"order": 1,
		"parent_id": 1,
		"url": "estate",
		"children": [{
			"id": 3,
			"name": "temporaryCharges",
			"title": "臨時收費",
			"type": "nav",
			"leave": 3,
			"order": 1,
			"parent_id": 2,
			"url": "charge"
		}, {
			"id": 4,
			"name": "propertyFees",
			"title": "物業費",
			"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
			}
.......
	}
}]

實現代碼：

'use strict';
exports.formatRouter = {

  /**
   * 樹形數據格式化，其中：
   * 子級的’parent_id‘等於父級的id,
   * 最高父級的id為0
   *
   * 排序規則為‘order’的數字順序
   * */
  treeData(data) {
    // 對源數據深度克隆
    const cloneData = JSON.parse(JSON.stringify(data));
    // filter嵌套filter相當於for循環嵌套for循環
    const result = cloneData.filter(parent => {
      // 返回每一項的子級數組
      const branchArr = cloneData.filter(child => parent.id === child.parent_id);

      // 若子級存在，則給子級排序；且，賦值給父級
      if (branchArr.length > 0) {
        branchArr.sort(this.compare('order'));
        parent.children = branchArr;
      }
      // 返回最高的父級，即，parent_id為0，
      return parent.parent_id === 0;
    });
    // 給最高級的父級排序
    result.sort(this.compare('order'));
    return result;
  },
  // 對象數組排序
  compare(property) {
    return function(a, b) {
      const value1 = a[property];
      const value2 = b[property];
      return value1 - value2;// 升序,降序為value2 - value1
    };
  },
};

說明：

其實就是兩個for循環嵌套，性能上還沒有for循環好。

歡迎關注公眾號【無聊猿】，共同學習探討