使用 ES12 中的 Array.prototype.sort 方法进行数组排序

在前端开发中，数据的排序是一个非常常见的操作。随着 ECMAScript 的不断更新，Array 对象的 sort 方法也在不断完善。在 ES12 中，sort 方法得到了升级，使排序操作更加方便高效。本文将介绍 ES12 中的 Array.prototype.sort 方法，并提供详细的示例代码和指导意义。

sort 方法基础使用

sort 方法可以按照指定的排序规则对数组元素进行排序。默认情况下，sort 方法按照字母表顺序对字符串进行排序，并按照数字大小对数字进行排序。例如：

const arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
arr.sort();
console.log(arr); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

sort 方法还可以接受一个比较函数作为参数，用于指定排序的规则。比较函数接受两个参数，分别表示待比较的两个元素。如果第一个元素应该排在第二个元素之前，在比较函数中返回负值；如果两个元素相等，在比较函数中返回 0；如果第一个元素应该排在第二个元素之后，在比较函数中返回正值。例如：

const arr = ["apple", "banana", "cherry", "date"];
arr.sort((a, b) => a.localeCompare(b));
console.log(arr); // ["apple", "banana", "cherry", "date"]

这里使用了字符串的 localeCompare 方法进行比较，确保排序操作正确进行。

ES12 新特性

在 ES12 中，sort 方法得到了升级，支持指定稳定排序。所谓稳定排序，指的是对于相等的元素，排序前后它们的相对位置保持不变。例如：

const arr = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 25 },
  { name: "David", age: 20 }
];
arr.sort((a, b) => a.age - b.age);
console.log(arr); // [
                  //   { name: "Bob", age: 20 },
                  //   { name: "David", age: 20 },
                  //   { name: "Alice", age: 25 },
                  //   { name: "Charlie", age: 25 }
                  // ]

在上面的例子中，sort 方法按照每个元素的 age 属性进行排序。由于 age 等于 25 的元素在原数组中的顺序为 0 和 2，排序后它们的相对位置没有发生改变，因此这个排序是稳定的。

要指定稳定排序，可以在 sort 方法中传入一个对象参数，该对象的 compareFunction 属性表示排序规则，stable 属性表示是否要进行稳定排序。例如：

const arr = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 20 },
  { name: "Charlie", age: 25 },
  { name: "David", age: 20 }
];
arr.sort({
  compareFunction(a, b) {
    return a.age - b.age;
  },
  stable: true
});
console.log(arr); // [
                  //   { name: "Bob", age: 20 },
                  //   { name: "David", age: 20 },
                  //   { name: "Alice", age: 25 },
                  //   { name: "Charlie", age: 25 }
                  // ]

这里指定了稳定排序，sort 方法会记录每个元素在排序前的位置，从而保证排序后每个元素的相对位置与排序前相同。

指导意义

sort 方法是一个非常常见的数组操作，掌握好 sort 方法的使用可以让我们写出更高效、更稳定的代码。特别是在开发大型复杂的应用时，稳定的排序是保证系统正确性的一个关键要素。因此，我们应该尽可能使用稳定排序，并根据需求指定合适的排序规则。

下面给出一些应用排序的场景，供参考：

• 对文章列表按照发布时间排序
• 对用户表按照注册时间排序
• 对订单表按照下单时间排序
• 对商品列表按照价格和库存排序
• 对学生成绩表按照成绩和考试时间排序

在实际开发中，我们可以根据需求灵活运用 sort 方法，让我们的业务逻辑更加简洁明了。

总结

本文介绍了 ES12 中的 Array.prototype.sort 方法，包括基础使用和新特性。sort 方法是前端开发中非常常用的数组操作之一，能够帮助我们实现各种排序操作。在实际开发中，我们应该根据需求灵活运用 sort 方法，并注意使用稳定排序保证系统正确性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65925bbdeb4cecbf2d72e2a0