说白了，就是养成“能不碰原数组就不碰”的习惯。你可能会说：“不就是改个数组吗？至于这么夸张？”一旦项目上了规模，几个数组操作叠在一起，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()，先拷贝再处理
说到底，避免数组副作用的核心就一条：把“修改”的念头换成“新建”的习惯。刚开始可能会觉得多写几行代码，但当你面对一个复杂的函数式流水线时，你会感谢自己当初的克制。
