js格式化树形数据(扁平化数据)
阅读原文时间:2023年07月08日阅读:2

需求:

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循环好。

欢迎关注公众号【无聊猿】,共同学习探讨