JavaScript 数组 sort() 方法

JavaScript sort() 语法

sort() 是 JavaScript 数组的一个方法，它用于对数组元素进行排序（升序或降序）。

语法：

arr.sort(compareFn)

说明：

sort() 方法可以接收单个参数。

• compareFn（可选）：它是一个自定义函数，数组会根据这个函数来判断是升序还是降序。

如果省略 compareFn 参数，则会执行以下步骤。

• 将所有元素转换为字符串。
• 使用这些字符串的 Unicode 码位值进行比较，然后按升序排列。
• undefined 元素会被移动到数组的末尾。

如果提供 compareFn 参数，它应该接受两个参数 a 和 b，表示要比较的两个元素。

• 如果 compareFunction(a, b) 返回一个负数，表示 a 应该排在 b 之前。
• 如果 compareFunction(a, b) 返回一个正数，表示 a 应该排在 b 之后。
• 如果 compareFunction(a, b) 返回 0，表示 a 和 b 的相对位置不变（但一些浏览器可能会改变）。

sort() 方法是有返回值的，也就是返回排序后的数组。也就是说，它返回的是调用该方法的同一个数组实例。

JavaScript sort() 摘要

JavaScript sort() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript sort() 方法是如何使用的。

示例 1：sort() 实现升序

function fn (a, b) {
    return a - b;
}
const arr = [3, 9, 1, 12, 50, 21];
arr.sort(fn);
console.log(arr);

运行结果如下。

[ 1, 3, 9, 12, 21, 50 ]

分析：

如果想要使用 sort() 方法来实现升序，我们可以认为上面 fn 的写法是固定的。这样定义之后，sort() 方法就会自动实现升序。

sort() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 sort() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
arr.sort(function(a, b) {
    return a - b;
});

// 方式2：使用箭头函数
arr.sort((a, b) => a - b)

示例 2：sort() 实现降序

function fn (a, b) {
    return b - a;
}
const arr = [3, 9, 1, 12, 50, 21];
arr.sort(fn);
console.log(arr);

运行结果如下。

[ 50, 21, 12, 9, 3, 1 ]

示例 3：sort() 不带参数

const arr = [3, 9, 1, 12, 50, 21];
arr.sort();
console.log(arr);

运行结果如下。

[1, 12, 21, 3, 50, 9]

分析：

如果 sort() 方法不带参数，那么所有非数组类型的元素，在排序之前都会转换为字符串，然后再按升序排列。这里可以看到，即使 21 在数字上大于 3，但 3 也排在 21 的后面，这是因为 "2" < "3"。因此在实际开发中，当使用 sort() 方法对数字进行排序时，我们必须始终提供比较函数，而不能依赖默认行为。

如果不希望 sort() 方法修改原数组，我们可以使用下面两种方式。

• ES6 解构赋值。
• ECMAScript 2023 新增的 toSorted() 方法。

示例 4：sort() 结合 ES6 解构赋值

function fn (a, b) {
    return a - b;
}
const arr = [3, 9, 1, 12, 50, 21];
const result = [...arr].sort(fn);

console.log(arr);
console.log(result);

运行结果如下。

[ 3, 9, 1, 12, 50, 21 ]
[ 1, 3, 9, 12, 21, 50 ]

示例 5：使用 toSorted() 代替 sort()

function fn (a, b) {
    return a - b;
}
const arr = [3, 9, 1, 12, 50, 21];
const result = arr.toSorted(fn);

console.log(arr);
console.log(result);

运行结果如下。

[ 3, 9, 1, 12, 50, 21 ]
[ 1, 3, 9, 12, 21, 50 ]

分析：

从结果可以看出，toSorted() 是一个 “非破坏性” 方法，它不会修改原数组，然后会返回排序后的数组。

“破坏性” 方法 vs “非破坏性” 方法

在 JavaScript 中，数组的 “破坏性” 方法以及它们对应的 “非破坏性” 方法，总结如下表所示。