在前端开发中，我们经常需要对数组进行排序操作。ES10 中新增的 Array.sort() 方法提供了更多的排序选项，能够帮助我们更方便地实现特定排序需求。
数组排序
首先，让我们来回顾一下数组排序的基本知识。在 JavaScript 中，可以使用 Array.sort() 方法对数组进行排序。
默认情况下，Array.sort() 方法会对元素进行字符串排序。例如：
----- --- - ---- -- --- ---- ----------- ----------------- -- ---- --- --- --
这是因为默认的排序函数将数字转换为字符串，然后按照字符编码进行比较。
如果想按照数字大小进行排序，我们需要自己传入排序函数：
----- --- - ---- -- --- ---- ------------ -- -- - - --- ----------------- -- --- --- --- ---
这种方式是最常见的排序方式，也是最基础的排序方式。在这个基础上，我们可以进一步探索 Array.sort() 方法提供的一些新特性。
数组按照属性排序
如果我们有一个对象数组，我们可能需要按照对象的某个属性进行排序。例如，我们有一个用户列表，每个用户对象包含 name 和 age 属性，我们想按照年龄进行排序：
----- ----- - - - ----- ------ ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- -- -------------- -- -- ----- - ------- ------------------- -- - -- - ----- ------- ---- -- -- -- - ----- ------ ---- -- -- -- - ----- ------- ---- -- -- -- -
这种方式非常有效，但是如果我们希望支持多个属性排序呢？例如，我们想先按照年龄排序，如果年龄相同，按照名字排序。
----- ----- - -
- ----- ------ ---- -- --
- ----- ------- ---- -- --
- ----- ------- ---- -- --
- ----- -------- ---- -- --
--
-------------- -- -- -
-- ------ --- ------ -
------ -----------------------------
- ---- -
------ ----- - ------
-
---
-------------------
-- -
-- - ----- ------- ---- -- --
-- - ----- -------- ---- -- --
-- - ----- ------ ---- -- --
-- - ----- ------- ---- -- --
-- -这个方法比较繁琐，并且不够通用。ES10 中新增了一个方法，可以帮助我们更方便地实现多字段排序。
利用 Array.sort() 实现多字段排序
ES10 新增的 Array.sort() 方法提供了新的排序选项，我们可以传入一个函数数组，每个函数对应一个排序字段。例如，我们想按照年龄和名字排序：
----- ----- - - - ----- ------ ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- - ----- -------- ---- -- -- -- ------------ --- -- -- ----- - ------ --- -- -- ----------------------------- --- ------------------- -- - -- - ----- ------- ---- -- -- -- - ----- -------- ---- -- -- -- - ----- ------ ---- -- -- -- - ----- ------- ---- -- -- -- -
注意，这里传入的是函数数组，而不是一个函数。每个函数对应一个排序字段。这种方式比手动实现多字段排序更方便，也更通用。
结论
在 ES10 中，Array.sort() 方法提供了更多的排序选项，可以帮助我们更方便地实现特定排序需求。在数组按照属性排序和利用 Array.sort() 实现多字段排序两个方面，我们介绍了具体的实现方法。
希望这篇文章对你有所帮助，谢谢阅读！
示例代码
本文完整示例代码如下：
-- ------ ----- ----- - - - ----- ------ ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- -- -------------- -- -- ----- - ------- ------------------- -- -------------- ----- ----- - - - ----- ------ ---- -- -- - ----- ------- ---- -- -- - ----- ------- ---- -- -- - ----- -------- ---- -- -- -- ------------ --- -- -- ----- - ------ --- -- -- ----------------------------- --- -------------------
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704b86cd91dce0dc84ff968