优化后台数据，实现前端相邻数据展示
前端开发中，经常需要处理异步获取的后台数据，而后台数据排序可能与前端展示需求不符。例如，后台按staff字段排序，但前端需按appeal_type和detail_appeal_type字段，确保相同appeal_type的数据相邻，且detail_appeal_type按序排列。本文介绍高效的排序方法。
假设后台返回如下JSON数据：
{
"code": 0,
"msg": "success",
"data": {
"data": [
{
"date": "2024-02-28-2024-02-28",
"staff": "li",
"sum_utilization_rate": 0.38,
"appeal_type": 16,
"appeal_type_utilization_rate": 0.24,
"detail_appeal_type": 17,
"detail_appeal_type_utilization_rate": 0.24,
"task_id": 248,
"task_utilization_rate": 0
},
// ...更多数据
]
}
}
我们需要根据appeal_type和detail_appeal_type对数据排序。
立即学习“前端免费学习笔记（深入）”；
一种方法是使用JavaScript的sort方法进行多级排序：先按appeal_type排序，再按detail_appeal_type排序。代码如下：
const list = data.data; // 假设data.data包含JSON数据中的data数组 list.sort((a, b) => a.appeal_type - b.appeal_type); list.sort((a, b) => a.detail_appeal_type - b.detail_appeal_type);
更通用的方法是使用reduce方法，可以方便地扩展到更多排序字段：
const sortedList = ['appeal_type', 'detail_appeal_type'].reduce((acc, field) => acc.sort((a, b) => a[field] - b[field]), list);
这段代码使用reduce方法，依次按指定字段排序，实现多字段排序。 这种方法更灵活，易于扩展。
通过以上方法，即可按前端需求排序后台数据，实现相邻数据展示。
