前端数据排序：实现相邻数据展示
前端开发中，经常需要对后台返回的数据进行二次排序，以满足特定的展示需求。本文将介绍如何处理异步获取的数据，并按照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方法进行比较。
通过以上方法，可以有效地对后台返回的数据进行排序，并以相邻数据的方式进行展示，提升用户体验。
以上就是如何高效地对后台返回数据进行二次排序，实现前端相邻数据展示？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
941
收藏
