JavaScript中创建新数组避免副作用

在Ja vaScript里，处理数组时最让人头疼的问题之一就是副作用——明明只是改了一个元素，却牵一发而动全身，让整个应用的状态变得不可预测。避免这个问题最直接有效的方式是什么？创建新数组，而不是修改原数组。核心在于切断引用关系、不触碰原始数据，让每次操作都可预测、可测试。

说白了，就是养成“能不碰原数组就不碰”的习惯。你可能会说：“不就是改个数组吗？至于这么夸张？”一旦项目上了规模，几个数组操作叠在一起，bug就像多米诺骨&牌一样倒下来。所以，从一开始就按规则来，后面会省很多心。

用非破坏性方法替代原地操作

Ja vaScript 数组有两类方法：一类是“破坏分子”——push、pop、splice、reverse、sort、fill，它们直接修改原数组；另一类是“文明人”——map、filter、concat、slice、flatMap，它们返回新数组。只要你的目标是“生成结果”，就请优先选择后者。具体怎么做？看几个常见场景：

• 要加元素？不用 arr.push(item)，改用 [...arr, item] 或 arr.concat(item)
• 要删元素？不用 arr.splice(i, 1)，改用 arr.filter((_, idx) => idx !== i)
• 要反转？不用 arr.reverse()，改用 [...arr].reverse() 或 arr.slice().reverse()
• 要排序？不用 arr.sort()，改用 [...arr].sort((a, b) => a - b)

这些替代写法看起来多敲了几个字符，但换来的是数据安全性——原数组完好无损，新数组独立可控。

复制时注意深浅层级

复制数组也有讲究。浅拷贝只断开第一层引用，适合纯值数组或你确定内部对象不会被意外修改的场景；若数组里装的是对象、日期、嵌套数组，浅拷贝后仍然共用内部引用，这时候就需要深拷贝。

• 一维数值/字符串数组：用 [...arr]、arr.slice()、Array.from(arr) 就够了
• 含对象的数组：[...arr] 只复制对象引用，修改 newArr[0].name 仍然会影响原对象——这点特别容易踩坑
• 需要真正隔离：用 structuredClone(arr)（现代环境）、JSON.parse(JSON.stringify(arr))（适用于简单结构，不含函数/undefined/Symbol）

举个现实中的例子：你从后端拿到一个用户列表，想做点本地过滤和排序。如果直接用 list.sort()，原数组就被改了，回头再对比数据时，源头已经变了。正确的做法是：先深拷贝一份，再在副本上操作。

把数组生成逻辑参数化

硬编码数组（比如 const list = [{id: 1}, {id: 2}]）写起来省事，但测试时就尴尬了——你没法灵活控制输入，边界情况覆盖不全。更好的做法是：把创建过程封装成函数，输入决定输出，副作用自然消失。

• 函数应只依赖参数，不读取 localStorage、不调用 Date.now()、不发起任何请求
• 示例：function createItems(count, type = 'default') { return Array.from({ length: count }, (_, i) => ({ id: i + 1, type })) }
• 测试时可以传入 0、1、100，甚至注入异常字段，完全掌控输入

这样一来，你的数组生成逻辑就变成了纯函数——同样的输入永远得到同样的输出，可预测、可测试、可复用。

声明方式不是关键，操作意图才是

很多人以为用了 const 就万事大吉，其实 const 只防止变量重新赋值，无法阻止对象内部被改。真正起作用的是“是否新建内存空间”。哪怕用 let，只要每次操作都基于副本，就不会污染原始数据。

• 错误示范：const arr = [1,2,3]; arr.push(4); —— 原数组已经变了
• 正确示范：const arr = [1,2,3]; const newArr = [...arr, 4]; —— 原数组完好，新数组独立
• 组件中接收 props 数组时，不要直接 props.items.sort()，先拷贝再处理

说到底，避免数组副作用的核心就一条：把“修改”的念头换成“新建”的习惯。刚开始可能会觉得多写几行代码，但当你面对一个复杂的函数式流水线时，你会感谢自己当初的克制。