js格式化树形数据（扁平化数据）
2024-10-01 04:03:47
需求：
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循环好。
欢迎关注公众号【无聊猿】，共同学习探讨
最新文章
- 创建一个点状注记（MarkerElement）
- UIWebView的使用
- Number of Digit One
- 让webstorm支持avalon语法自动补全
- 关于PHP的正则表达式
- BZOJ 2627 JZPKIL
- 关于生成缩略图及水印图片时出现GDI+中发生一般性错误解决方法
- hadoop jobhistory解析工具汇总
- iOS 网络处理注意点
- [super dealloc]内存释放的先后顺序
- mysqldump 参数说明
- 【oracle】初学jobs
- galera mysql 多主复制启动顺序及命令
- github上的一些Delphi开源项目
- ACM学习-POJ-1004-Financial Management
- python基础之实现sql增删改查
- R语言︱文本挖掘——jiabaR包与分词向量化的simhash算法（与word2vec简单比较）
- 16 ， CSS 边框与边界
- Web前端性能优化——编写高效的JavaScript
- Golang 中哪些值是不可以寻址的