Array toSorted怎么配置或排查

如果页面只是想“排好序但不影响原数据”，优先用 toSorted()；如果业务明确允许直接改动当前数组，才继续用 sort()。排查时最容易漏掉两点：toSorted 不是所有旧运行环境都存在，且不传比较函数时数字会按字符串顺序排列。

toSorted 和 sort 的差别，先看是否修改原数组

toSorted() 是复制版本的排序方法，调用后得到一个新的数组引用。sort() 则直接改变原数组，并返回这个原数组引用。这个差别会影响 React 状态、缓存数据和需要保留原始顺序的筛选逻辑。

例如下面的比较能直接暴露引用边界：

const source = [3, 1, 2];
const copy = source.toSorted((a, b) => a - b); // 中文说明：数值升序，并创建新数组
console.log(source); // [3, 1, 2]
console.log(copy);   // [1, 2, 3]

const same = source.sort((a, b) => a - b); // 中文说明：原地排序，返回原数组引用
console.log(same === source); // true

数字和对象排序为什么要写 compareFn

省略 compareFn 时，数组元素会转换为字符串，再按 Unicode/UTF-16 顺序比较。所以 [1, 10, 2] 的默认结果不是数值升序。数字数组应明确返回差值；对象数组则要把业务字段取出来比较。

const scores = [1, 10, 2];
const numericOrder = scores.toSorted((a, b) => a - b); // 中文说明：返回负数表示 a 排在 b 前面

const users = [
  { name: "Lin", score: 80 },
  { name: "Mia", score: 95 },
  { name: "Kai", score: 72 },
];
const byScore = users.toSorted((a, b) => a.score - b.score); // 中文说明：只按 score 字段升序，不改 users
console.log(numericOrder); // [1, 2, 10]
console.log(byScore.map((user) => user.name)); // ["Kai", "Lin", "Mia"]

比较函数要保持纯粹、稳定，并让相反参数得到相反方向的结果。不要在比较函数里修改对象、累加外部计数或返回真假值；true/false 不能表达完整的前后关系。

遇到 toSorted 不生效，按环境和数据边界排查

控制台若出现 toSorted is not a function，通常不是数组内容问题，而是当前浏览器、Node.js 或运行时版本没有提供这个方法。MDN 将它列为 2023 年 7 月起跨浏览器可用的基线能力，但项目仍应以实际支持矩阵为准，尤其要照顾旧 WebView 和旧构建目标。

兼容旧环境时，先复制再原地排序，语义上仍然是不改原数组：

function sortedCopy(list, compareFn) {
  // 中文说明：slice 创建浅拷贝，sort 只作用于副本；compareFn 由调用方决定顺序
  return list.slice().sort(compareFn);
}

const result = sortedCopy([3, 1, 2], (a, b) => a - b);
console.log(result); // [1, 2, 3]

还要注意稀疏数组：toSorted() 会把空槽按 undefined 处理，并把它们放到结果末尾。若数据来自表单或接口，建议先决定空值应排在末尾还是参与业务排序，不要把空槽和显式 undefined 当成普通数字。

迁移后的最小回归检查清单

从 sort() 改成 toSorted() 后，不要只看页面列表顺序。至少检查以下四项：

• 引用检查：排序前后，原数组内容是否仍保持不变；返回值是否是新引用。
• 类型检查：数字、数字字符串和对象字段是否使用了正确的比较函数。
• 边界检查：空数组、重复值、undefined、稀疏数组和缺失字段如何处理。
• 兼容检查：目标浏览器、Node.js、WebView 和测试运行时是否都支持；不支持时切换到复制加 sort()。

实际迁移中，最稳妥的决策不是把所有 sort() 全部替换掉，而是先确认调用方是否依赖原数组被改写。需要不可变派生数据就用 toSorted()，需要兼容旧环境就封装复制排序，只有确实要原地更新时才保留 sort()。

常见问题

toSorted 会深拷贝对象吗？

不会。它只创建新的数组容器，数组里的对象仍是原对象引用；若还要修改对象字段，需要另行设计拷贝策略。

为什么 toSorted 排数字还是错的？

常见原因是省略了 compareFn。请改用 (a, b) => a - b，并确认输入不是混合了数字和不可转换字符串的数据。

能用 Array.prototype.toSorted.call(arrayLike) 吗？

可以，方法只需要类似数组的 length 和整数索引属性；但业务代码通常先转成真正数组更直观，也更容易做类型约束。