前端数据排序：实现相邻数据展示

前端开发中，经常需要对后台返回的数据进行二次排序，以满足特定的展示需求。本文将介绍如何处理异步获取的数据，并按照appeal_type和detail_appeal_type字段进行排序，确保相同类型的数据相邻显示。

问题：后台返回的JSON数据已按staff字段排序，但前端需要根据appeal_type和detail_appeal_type字段进行二次排序。直接使用sort方法无效，甚至可能导致数据更加混乱，因为sort方法一次只能基于一个字段排序。

解决方案：采用链式排序或reduce方法。

立即学习“前端免费学习笔记（深入）”；

方法一：链式排序

AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序，基于浩创云、ThinkPHP（PHP）开发，支持微信服务号与 H5 端，适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载

先按appeal_type排序，然后在appeal_type相同的数据中，再按detail_appeal_type排序。可以使用两次sort方法实现：

const sortedList = list.sort((a, b) => a.appeal_type - b.appeal_type).sort((a, b) => a.detail_appeal_type - b.detail_appeal_type);

方法二：reduce方法 (更通用)

将排序字段放在数组中，使用reduce方法依次对每个字段进行排序。这种方法更灵活，易于扩展到更多排序字段。

const sortedList = ['appeal_type', 'detail_appeal_type'].reduce((acc, field) => acc.sort((a, b) => a[field] - b[field]), list);

此方法中，acc累积每次排序的结果，最终得到按多个字段排序的sortedList。 需要注意的是，此方法假设排序字段为数值类型。如果是字符串类型，需要使用localeCompare方法进行比较。

通过以上方法，可以有效地对后台返回的数据进行排序，并以相邻数据的方式进行展示，提升用户体验。