怎么在不修改原数组的情况下操作JavaScript数据？

为什么必须避免直接修改原数组？

在编写业务逻辑时，很多难以追踪的 Bug 都始于一行看似轻巧的代码，例如 list.sort() 或 list.push(newItem)。初学者常以为这只是对数据的普通运算，但实际上，JavaScript 中的数组属于引用类型（Reference Type）。变量保存的只是指向堆内存中该数组的指针，而不是数组数据本身的独立快照。

当一个函数接收数组并执行原地修改（In-place Mutation）时，所有引用了该数组的其他模块、组件或缓存都会在不知不觉中被同步篡改。这种“隐式副作用”在现代前端框架（如 React、Vue）中尤为致命：React 依靠浅层对象引用对比（prevProps !== nextProps）判断是否触发重新渲染，如果原地修改原数组，数组引用地址保持一致，组件就会漏掉更新；而在需要回退操作、撤销重做（Undo/Redo）或时间旅行调试的场景下，被污染的原数组更会导致历史状态永久丢失。

四大常规操作的不可变替代方案

对数组的操作主要归纳为增加、删除、修改、排序四种。以往开发者习惯使用的 push、unshift、splice、sort 均为原地破坏性方法。下面逐一给出标准的不可变替代实现：

1. 新增元素：末尾追加与首部插入

利用 ES6 展开运算符（Spread Operator）...，可以迅速在不触碰原数组的前提下拼接元素：

const original = [10, 20, 30];

// 末尾追加（替代 original.push(40)）
const appended = [...original, 40];
// 结果：[10, 20, 30, 40]，original 依然为 [10, 20, 30]

// 头部插入（替代 original.unshift(0)）
const prepended = [0, ...original];
// 结果：[0, 10, 20, 30]

2. 删除元素：按条件过滤与按索引截取

删除操作最安全的方法是使用 filter()。它本身就会返回一个满足条件的全新数组：

const list = ['apple', 'banana', 'cherry'];

// 按值过滤删除 'banana'
const withoutBanana = list.filter(item => item !== 'banana');
// 结果：['apple', 'cherry']

// 按下标删除索引为 1 的项
const removeByIndex = list.filter((_, index) => index !== 1);
// 结果：['apple', 'cherry']

3. 修改/替换元素：按条件映射与按索引重设

若需要修改数组中的某个元素，推荐使用 map()，对目标项返回修改后的新对象或新值，对其余项原样返回：

const scores = [80, 92, 75];

// 将不及格分数补全，或针对某个索引进行单点替换
const updatedScores = scores.map((val, idx) => idx === 2 ? 85 : val);
// 结果：[80, 92, 85]，原 scores 不变

4. 排序与翻转：先浅拷贝再操作

在旧版 JavaScript 中，sort() 和 reverse() 都会直接在原数组上倒序或排布，导致灾难性的隐式修改。传统解决办法是先复制再排序：

const numbers = [3, 1, 4, 1, 5, 9];

// 错误示范：numbers.sort() 会直接破坏原数组
// 正确模式：通过展开语法浅拷贝后再原地排序
const sortedAsc = [...numbers].sort((a, b) => a - b);
const reversed = [...numbers].reverse();

现代 ES2023 原生非破坏性方法

为了免除开发者反复使用 [...arr].sort() 这种既繁琐又易被疏漏的写法，ECMAScript 2023（ES14）正式标准化了四套专门的非破坏性数组操作方法。这些方法完全不修改调用者，并直接返回新的数组实例：

1. Array.prototype.toSorted()

对应原有的 sort()，但不会原地排列原数组：

const months = ['Mar', 'Jan', 'Feb', 'Dec'];
const sortedMonths = months.toSorted();

// sortedMonths -> ['Dec', 'Feb', 'Jan', 'Mar']
// months 原数组完全未被改动 -> ['Mar', 'Jan', 'Feb', 'Dec']

2. Array.prototype.toReversed()

对应原有的 reverse()，直接返回倒序后的新数组：

const items = [1, 2, 3];
const reversedItems = items.toReversed();

// reversedItems -> [3, 2, 1]
// items -> [1, 2, 3]

3. Array.prototype.toSpliced(start, deleteCount, ...items)

最让人容易误用的破坏性方法莫过于 splice()。而 toSpliced() 拥有相同的参数签名，却不会修改原数组，是中间插入、区间替换和任意位置删除的利器：

const colors = ['red', 'green', 'blue'];

// 在下标 1 处删除 1 个元素，并插入 'yellow'
const updatedColors = colors.toSpliced(1, 1, 'yellow');

// updatedColors -> ['red', 'yellow', 'blue']
// colors 依然是 -> ['red', 'green', 'blue']

4. Array.prototype.with(index, value)

在以往，要以不可变的方式修改单个索引（类似 arr[2] = 99），必须使用繁琐的 map()。现在只需调用 with()：

const sequence = [10, 20, 30, 40];
const replaced = sequence.with(2, 999);

// replaced -> [10, 20, 999, 40]
// sequence -> [10, 20, 30, 40]

不可忽视的陷阱：浅拷贝与对象引用

许多开发者在理解了不可变概念后，往往自信地使用 const copy = [...users]，以为已经高枕无忧。然而，展开运算符、slice()、concat() 以及上述所有 ES2023 方法，全部都属于浅拷贝（Shallow Copy）。

浅拷贝只会复制数组本身的外层容器，而数组内部存储的如果是非原始值（例如对象、嵌套数组），拷贝出来的仍然是该对象的内存地址引用。一旦直接修改了某个子对象的属性，原数组中的对应数据仍会被波及。

要安全地修改包含对象的数组，通常有两种标准化方案：

方案 A：结合 map() 与对象展开（推荐用于单点更新）

const users = [
  { id: 1, name: 'Alice', active: false },
  { id: 2, name: 'Bob', active: true }
];

// 安全地激活 id 为 1 的用户
const updatedUsers = users.map(user => {
  if (user.id === 1) {
    // 关键：对该对象本身也进行浅拷贝展开，生成全新对象
    return { ...user, active: true };
  }
  return user;
});

方案 B：使用原生 structuredClone() 进行完全深拷贝

如果数据层级极深，或者需要对数组做大范围批处理重构，可以使用现代浏览器与 Node.js 17+ 原生支持的 structuredClone()：

const deepOriginal = [{ info: { role: 'admin' } }];

// 真正断开所有层级的对象引用
const deepCloned = structuredClone(deepOriginal);
deepCloned[0].info.role = 'user';

// deepOriginal[0].info.role 依然安然无恙为 'admin'

破坏性与非破坏性方法对照速查

为了在日常开发中形成肌肉记忆，下表整理了 JavaScript 中常用数组操作的“危险方法”与对应的“安全替代方案”：

结语与实践建议

掌握不可变数组操作不仅能解决 React 等前端框架渲染遗漏的问题，更能从根源上降低大型应用的状态管理心智负担。日常开发中，可以配置 ESLint 规则（如 eslint-plugin-functional 或特定禁用规则）来禁止调用 push、splice、sort 等容易引发隐式变异的方法；对于涉及数组的复杂变换，优先选用 ES2023 的语义化非破坏性方法，并在遇到嵌套对象时主动配合 structuredClone 或局部展开，彻底保障数据流向的清晰与稳定。