JavaScript Array.toSorted 怎样避免原数组被改写

在列表页、筛选器或状态管理代码中，排序经常只是为了得到一个新的展示顺序。如果直接调用 sort()，输入数组本身会被改写，其他仍持有这个数组引用的代码也会看到顺序变化。Array.prototype.toSorted() 解决的正是这个边界：它返回排序后的新数组，不把排序结果写回原数组。

官方参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted

需要保留原数组时优先使用 toSorted()；排序数字或对象时显式传入比较函数；如果运行环境不支持它，可使用 [...items].sort(compareFn) 做同样的浅拷贝降级。注意，toSorted() 只复制数组外层，不会深拷贝数组里的对象。

先看清 sort() 和 toSorted() 改了谁

sort() 会在当前数组上排序并返回这个数组本身。toSorted() 则把排序后的元素放进新数组，调用者可以继续使用原数组的顺序。下面这个对比适合用来识别共享引用带来的隐蔽问题：

const scores = [30, 10, 20];

// sort() 直接改写 scores，返回值和 scores 指向同一个数组。
const inPlace = scores.sort((a, b) => a - b);
console.log(inPlace); // [10, 20, 30]
console.log(scores);  // [10, 20, 30]

const ranks = [30, 10, 20];

// toSorted() 返回新数组，原数组仍保持调用前的顺序。
const copied = ranks.toSorted((a, b) => a - b);
console.log(copied); // [10, 20, 30]
console.log(ranks);  // [30, 10, 20]

这一区别在 React 状态、缓存快照或多个组件共享数据时尤其重要。不要只看排序后的值是否正确，还要确认是否有其他代码仍依赖原数组的顺序。

数字和对象排序都要写清比较函数

省略比较函数时，数组元素会先按字符串的 Unicode 码点顺序比较，所以数字数组可能得到 [10, 2, 30] 这样的结果。数字排序应明确写成 (a, b) => a - b；对象排序则把字段差值或显式比较规则放进回调。

const prices = [10, 2, 30];

// 明确按数值升序，避免默认的字符串排序。
const priceAsc = prices.toSorted((a, b) => a - b);

const tasks = [
  { name: "打包", priority: 3 },
  { name: "测试", priority: 1 },
  { name: "发布", priority: 2 },
];

// 只决定新数组的排列，不删除或修改任务对象。
const byPriority = tasks.toSorted((a, b) => a.priority - b.priority);
console.log(priceAsc); // [2, 10, 30]
console.log(byPriority.map((task) => task.name)); // ["测试", "发布", "打包"]

比较函数应保持简单且可预测：返回负数表示 a 排在前面，返回正数表示 b 排在前面，返回 0 表示当前比较下不交换。不要在比较函数里修改原数组、改写对象字段或依赖不稳定的外部状态。

toSorted() 是浅拷贝，不是深拷贝

“不改原数组”只针对数组的元素槽位。新数组和原数组仍然可能共同引用同一批对象，因此排序不会改变对象字段，但后续修改一个对象时，两个数组里看到的对象仍会一起变化：

const users = [
  { name: "Lin", score: 70 },
  { name: "Ming", score: 90 },
];

// 只复制数组容器，user 对象仍是原来的引用。
const orderedUsers = users.toSorted((a, b) => b.score - a.score);
orderedUsers[0].score = 95;

// 排列没有回写 users，但对象字段的改动仍能从 users 看到。
console.log(users[1].score); // 95
console.log(orderedUsers[0] === users[1]); // true

如果业务还要求隔离嵌套对象，需要单独设计复制策略，例如按字段创建新对象，或使用适合数据形状的结构化复制方案。不能因为方法名带有“to”或“copying”就把它当成深拷贝 API。

旧环境不支持时怎样安全降级

MDN 将 toSorted() 标为广泛可用，并注明跨浏览器可用时间从 2023 年 7 月开始。仍需支持更老的浏览器、嵌入式 WebView 或旧 JavaScript 运行时，可以先复制数组再调用 sort()：

function sortedCopy(items, compareFn) {
  // 先复制数组，再让 sort() 只作用于副本。
  const copy = [...items];
  return copy.sort(compareFn);
}

const input = [3, 1, 2];
const output = sortedCopy(input, (a, b) => a - b);

console.log(output); // [1, 2, 3]
console.log(input);  // [3, 1, 2]

这段降级和 toSorted() 一样只保证数组外层不被改写。若项目需要支持稀疏数组、类数组对象或特殊的兼容性策略，应先查目标运行时的实现约束，再决定是否采用 polyfill，而不是无条件给原型打补丁。

按数据边界选择哪种写法

可以把判断压缩成一句话：只需要换顺序，就用 toSorted()；需要共享对象也被隔离，则先解决复制策略，再决定如何排序。

常见问题

toSorted() 会返回原数组吗？

不会。它返回一个新的数组容器；可以用严格相等比较返回值和输入数组，结果应为 false。

为什么数字排序要传比较函数？

因为不传时会按字符串的 Unicode 码点比较，数字的字典序不等于数值大小。

toSorted() 能避免对象字段被改写吗？

它不负责保护对象字段，只避免排序过程改写数组槽位。对象是否共享，要由调用者单独处理。

toSorted() 和复制后 sort() 怎么选？

目标运行时支持时优先用 toSorted() 表达不可变排序意图；需要兼容旧运行时时，用复制后 sort() 的降级写法。