前端数据排序：实现相邻数据展示
前端开发中，经常需要对后台返回的数据进行二次排序，以满足特定的展示需求。本文将介绍如何处理异步获取的数据，并按照appeal_type和detail_appeal_type字段进行排序，确保相同类型的数据相邻显示。
问题：后台返回的JSON数据已按staff字段排序，但前端需要根据appeal_type和detail_appeal_type字段进行二次排序。直接使用sort方法无效，甚至可能导致数据更加混乱，因为sort方法一次只能基于一个字段排序。
解决方案：采用链式排序或reduce方法。
立即学习“前端免费学习笔记（深入）”；
方法一：链式排序
先按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方法进行比较。
通过以上方法，可以有效地对后台返回的数据进行排序，并以相邻数据的方式进行展示，提升用户体验。
