ES10 是 ECMAScript 的第十个版本，它为前端开发带来了许多新特性和语法糖，其中包括 Array.sort 的排序规则的更新。Array.sort 是 JavaScript 中常用的数组排序方法，但它的排序规则可能会让开发者感到困惑。在本文中，我们将详细介绍 ES10 中 Array.sort 的排序规则，帮助开发者更好地理解这个方法，以及如何在实际开发中使用它。
Array.sort 的排序规则
在 ES10 中，Array.sort 的排序规则有了更新。在之前的版本中，Array.sort 默认使用字符串的排序规则，即将数组中的每个元素转换为字符串，然后按照字符串的 Unicode 编码进行排序。这种排序规则可能会导致一些问题，例如：
const arr = [1, 20, 3]; arr.sort(); console.log(arr); // [1, 20, 3]
在上面的例子中，由于默认使用字符串的排序规则，所以排序结果并不是我们期望的。为了解决这个问题，ES10 中新增了一个可选参数 compareFunction，用于指定排序规则。compareFunction 是一个函数，它接受两个参数，表示需要比较的两个元素，如果第一个元素应该排在第二个元素之前，返回一个负数；如果第一个元素应该排在第二个元素之后，返回一个正数；如果两个元素相等，返回 0。
const arr = [1, 20, 3]; arr.sort((a, b) => a - b); console.log(arr); // [1, 3, 20]
在上面的例子中，我们传入了一个 compareFunction，它使用了简单的比较逻辑，将数组按照从小到大的顺序排序。
深入理解 Array.sort 的排序规则
虽然 compareFunction 看起来很简单，但是在实际开发中，我们可能会遇到一些比较复杂的排序场景。下面是一些常用的排序规则，供开发者参考：
按照对象属性排序
如果数组中的元素是对象，我们可以使用对象属性进行排序。例如，我们有一个包含学生信息的数组，需要按照学生的年龄进行排序：
const students = [
{ name: 'Tom', age: 18 },
{ name: 'Jack', age: 20 },
{ name: 'Lucy', age: 16 }
];
students.sort((a, b) => a.age - b.age);
console.log(students); // [{ name: 'Lucy', age: 16 }, { name: 'Tom', age: 18 }, { name: 'Jack', age: 20 }]在上面的例子中，我们使用了对象的 age 属性进行排序。
按照多个属性排序
有时候，我们需要按照多个属性进行排序。例如，我们有一个包含学生信息的数组，需要按照学生的年龄和姓名进行排序：
-- -------------------- ---- -------
----- -------- - -
- ----- ------ ---- -- --
- ----- ------- ---- -- --
- ----- ------- ---- -- -
--
----------------- -- -- -
-- ------ --- ------ -
------ -----------------------------
-
------ ----- - ------
---
---------------------- -- -- ----- ------- ---- -- -- - ----- ------ ---- -- -- - ----- ------- ---- -- --在上面的例子中，我们先按照年龄进行排序，如果年龄相同，再按照姓名进行排序。
按照数组中元素的出现次数排序
有时候，我们需要按照数组中元素的出现次数进行排序。例如，我们有一个包含颜色信息的数组，需要按照颜色出现的次数进行排序：
-- -------------------- ---- ------- ----- ------ - ------- -------- ------- ------ -------- --------- ----- ----- - -------------------- ----- -- - ---------- - ----------- -- -- - -- ------ ----- -- ---- --------------- -- -- -------- - ---------- -------------------- -- --------- ------ -------
在上面的例子中，我们使用 reduce 方法统计了每种颜色出现的次数，然后根据出现次数进行排序。
总结
Array.sort 是 JavaScript 中常用的数组排序方法，但它的排序规则可能会让开发者感到困惑。在 ES10 中，为了解决这个问题，新增了一个可选参数 compareFunction，用于指定排序规则。在实际开发中，我们可能会遇到一些比较复杂的排序场景，例如按照对象属性排序、按照多个属性排序、按照数组中元素的出现次数排序等。通过学习 ES10 中 Array.sort 的排序规则，我们可以更好地理解这个方法，以及如何在实际开发中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66015279d10417a222c81ab4