在 JavaScript 数组操作中，非破坏性方法通过返回新数组而非修改原数组的特性，在状态管理、数据不可变性维护等场景中展现出显著优势。ES2023 标准正式引入了一系列非破坏性数组方法，包括 toSorted()、toReversed()、toSpliced() 和 with()，它们分别对应传统的 sort()、reverse()、splice() 和索引赋值操作，但通过创建数组副本避免了对原始数据的直接修改[6][7]。

一、商品列表排序：toSorted() 与 sort() 的对比实践

在电商平台的商品列表排序功能中，保持原始数据不变是确保用户操作可回溯的关键。传统 sort() 方法会直接修改原数组，可能导致意外的数据污染，而 toSorted() 则通过返回新数组实现安全排序。

基础用法对比：

// 商品列表数据
const products = [
  { id: 1, name: "笔记本电脑", price: 5999 },
  { id: 2, name: "无线鼠标", price: 129 },
  { id: 3, name: "机械键盘", price: 399 }
];

// 传统 sort() 方法：修改原数组
const sortedByPriceWithSort = products.sort((a, b) => a.price - b.price);
console.log(products); // 原数组已被修改：[{id:2, ...}, {id:3, ...}, {id:1, ...}]

// 非破坏性 toSorted() 方法：返回新数组
const sortedByPriceWithToSorted = products.toSorted((a, b) => a.price - b.price);
console.log(products); // 原数组保持不变：[{id:1, ...}, {id:2, ...}, {id:3, ...}]
console.log(sortedByPriceWithToSorted); // 新数组：[{id:2, ...}, {id:3, ...}, {id:1, ...}]

比较函数规则：toSorted() 接受可选的比较函数 compareFn(a, b)，其返回值决定排序逻辑：

状态管理优势：在 React、Redux 等框架中，直接修改状态数组会导致不可预测的渲染问题。toSorted() 通过返回新数组，确保状态更新符合 "不可变数据" 范式，避免副作用并简化时间旅行调试[8][9]。

二、历史记录回滚：toReversed() 的不可变反转实现

在需要支持 "撤销/回滚" 的功能（如列表编辑、数据可视化操作）中，toReversed() 可在反转数组的同时保留原始数据，为历史状态恢复提供基础。

功能实现示例：

// 初始化任务列表
const taskList = [[10](需求分析)][[11](架构设计)][[12](编码开发)][[13](测试验收)];
// 存储操作历史
const history = [taskList]; 

// 反转列表（非破坏性操作）
const reversedList = taskList.toReversed();
history.push(reversedList); // 记录新状态：[原始列表, 反转后列表]

console.log(taskList); // 原始数据不变：[[10](需求分析)][[11](架构设计)][[12](编码开发)][[13](测试验收)]
console.log(reversedList); // 新数组：[[10](需求分析)][[11](架构设计)][[12](编码开发)][[13](测试验收)]

// 回滚操作：恢复至上一状态
const rollbackList = history[0]; 
console.log(rollbackList); // 成功恢复原始列表

与 reverse() 的核心差异：reverse() 会直接颠倒原数组的元素顺序，而 toReversed() 始终返回新数组副本，二者对原始数据的影响如下：

三、其他非破坏性方法补充

ES2023 还提供了另外两个非破坏性方法，进一步完善了数组操作的不可变能力：

1. toSpliced(start, deleteCount, ...items)
   对标 splice()，支持在指定位置删除/添加元素并返回新数组，避免修改原数组：

   javascript

   复制代码

   const fruits = [[14](苹果)][[15](香蕉)][[16](橙子)];
   // 从索引 1 开始删除 1 个元素，并插入 "葡萄"
   const newFruits = fruits.toSpliced(1, 1, "葡萄");
   console.log(fruits); // 原数组不变：[[14](苹果)][[15](香蕉)][[16](橙子)]
   console.log(newFruits); // 新数组：[[14](苹果)][[16](橙子)][[17](葡萄)]

2. with(index, value)
   通过索引修改元素并返回新数组，语法更简洁，适合单个元素更新：

   javascript

   复制代码

   const scores = [90, 85, 78];
   // 将索引 2 的元素修改为 88
   const updatedScores = scores.with(2, 88);
   console.log(scores); // 原数组不变：[90, 85, 78]
   console.log(updatedScores); // 新数组：[90, 85, 88]

四、最佳实践与总结

非破坏性数组方法通过分离原始数据与操作结果，在现代前端开发中展现出显著价值：

• 状态管理：与 React、Vue 等框架的响应式系统兼容，避免直接修改状态导致的渲染异常[8]。
• 数据安全：防止意外修改共享数据，降低多模块协作时的副作用风险。
• 链式操作：支持流畅的方法链，如 arr.toSorted().toReversed().with(0, value)，提升代码可读性。

注意事项：非破坏性方法每次调用都会创建新数组，对于超大数组（10万+元素）需评估性能成本，可结合 slice() 等方法按需优化[9]。

通过 toSorted()、toReversed() 等方法，JavaScript 数组操作正式进入 "不可变优先" 时代，为构建可预测、易维护的应用提供了更强大的工具支持。