JavaScript Array toSorted 方法（超详细）

JavaScript Array toSorted 方法

在 JavaScript 中，toSorted 方法是 Array 的新成员，它提供了一种不改变原数组的前提下对数组进行排序的方式。这种方法对于需要保持原始数据不变的场景特别实用，尤其在处理数据流或进行函数式编程时。本文围绕 "JavaScript Array toSorted 方法" 详细讲解其用法、特性与最佳实践。

核心概念

toSorted 是 ECMAScript 2023 引入的新方法，用于对数组进行排序并返回一个新的已排序数组，原数组保持不变。它类似于 sort() 方法，但具有函数式编程的特性，避免了原地修改数组的副作用。

类比理解：
你可以把 toSorted 想象成一个“复制粘贴+排序”的快捷操作，而不是直接在原稿上涂改。

基础语法

默认排序

默认情况下，toSorted() 会按照字符串的 Unicode 编码对数组元素进行升序排序：

const numbers = [10, 5, 20, 1];
const sorted = numbers.toSorted(); // [1, 5, 10, 20]
console.log(numbers); // [10, 5, 20, 1]，原数组未被修改

自定义排序函数

你可以传入一个比较函数来自定义排序逻辑：

const words = ['banana', 'apple', 'Cherry', 'Apricot'];
const sorted = words.toSorted((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
// ['Apricot', 'apple', 'banana', 'Cherry']

这里通过 toLowerCase() 和 localeCompare() 实现了不区分大小写的字母排序。

进阶特性

降序排序

const numbers = [10, 5, 20, 1];
const sortedDesc = numbers.toSorted((a, b) => b - a);
// [20, 10, 5, 1]

排序对象数组

toSorted 也能用于对象数组，只需指定比较规则：

const users = [
  { name: 'Alice', age: 30 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 35 }
];

const sortedByAge = users.toSorted((a, b) => a.age - b.age);
// 按年龄升序排序

实战应用

1. 排序并渲染表格

在前端开发中，我们常常需要在不改变原始数据的情况下展示排序后的结果。例如：

const products = [
  { name: 'Phone', price: 800 },
  { name: 'Laptop', price: 1500 },
  { name: 'Tablet', price: 600 }
];

// 按价格升序排序
const sortedProducts = products.toSorted((a, b) => a.price - b.price);
console.log(sortedProducts); // 输出排序后的数组

适用于 Vue、React 等框架中对数据进行处理前渲染。

2. 排序并去重

结合 toSorted 和 toSet 可以实现排序后去重的简洁写法：

const numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5];
const uniqueSorted = [...new Set(numbers)].toSorted();
// [1, 2, 3, 4, 5, 6, 9]

这个写法在处理用户输入或数据清洗时非常有用。

注意事项

• 原数组不会被修改，这与 sort() 不同。如果你希望排序后更新原数组，请使用 sort()。
• 默认排序按字符串比较，对数字排序时需自定义比较函数。
• 比较函数逻辑需正确，否则排序结果可能不符合预期。
• 兼容性问题：部分浏览器或 Node.js 版本可能尚未支持 toSorted，建议在使用前检查环境支持情况。

常见问题

Q1：toSorted 和 sort 有什么区别？
A1：toSorted 不修改原数组，而是返回排序后的新数组；而 sort() 会直接在原数组上排序。

Q2：如何对字符串数组按字母排序？
A2：默认调用 toSorted() 即可，但建议使用 localeCompare() 来确保准确的字母排序：

['banana', 'apple', 'cherry'].toSorted((a, b) => a.localeCompare(b));

Q3：toSorted 是否支持降序排序？
A3：是的，只需在比较函数中返回 b - a 即可。

总结

JavaScript Array toSorted 方法 提供了一种干净、安全的数组排序方式，适用于需要保持原数组不变的开发场景。