name: js-tosorted-immutable description: 使用toSorted()替代sort()以避免突变数组。当对React的props、state或其他地方共享/引用的数组进行排序时应用。

使用toSorted()代替sort()实现不可变性

.sort()会在原地突变数组，这在React中可能导致错误。使用.toSorted()创建一个新的排序数组，而不改变state和props。

错误（突变原始数组）：

function UserList({ users }: { users: User[] }) {
  // 突变users prop数组！
  const sorted = useMemo(
    () => users.sort((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

正确（创建新数组）：

function UserList({ users }: { users: User[] }) {
  // 创建新的排序数组，原始数组不变
  const sorted = useMemo(
    () => users.toSorted((a, b) => a.name.localeCompare(b.name)),
    [users]
  )
  return <div>{sorted.map(renderUser)}</div>
}

为什么这在React中很重要：

Props/state突变破坏了React的不可变性模型 - React期望props和state被视为只读
导致闭包陈旧错误 - 在闭包（回调、效果）中突变数组可能导致意外行为

浏览器支持（对旧浏览器的后备方案）：

.toSorted()在所有现代浏览器中可用（Chrome 110+、Safari 16+、Firefox 115+、Node.js 20+）。对于旧环境，使用展开运算符：

// 对旧浏览器的后备方案
const sorted = [...items].sort((a, b) => a.value - b.value)

其他不可变数组方法：

.toSorted() - 不可变排序
.toReversed() - 不可变反转
.toSpliced() - 不可变拼接
.with() - 不可变元素替换