JavaScript如何修改数组元素且不改变原有引用

可行的实现方案 #

以下两种方法都可以在不修改insideArr引用的前提下更新内容，同步生效到nestedArr：

1. 使用Array.prototype.splice（最直观的数组原生方法）

// 从下标0开始删除insideArr所有元素，再插入targetArr的全部元素
insideArr.splice(0, insideArr.length, ...targetArr)

2. 使用Object.assign（数组本质是对象，该方法直接修改原对象属性）

// 把targetArr的所有元素/属性直接赋值到insideArr上
Object.assign(insideArr, targetArr)

两种方法执行后，insideArr === nestedArr[0]的结果依然为true，且两者内容都会和targetArr完全一致。

关于依赖引用修改的用法是否要避免 #

这个需要结合使用场景判断：

• 不推荐使用的场景：
  • 大型项目、多人协作场景：隐式的引用修改会导致数据变更溯源困难，调试成本大幅提升
  • 状态管理场景（如Redux、Vuex/Pinia等要求不可变更新的场景）：引用修改会破坏状态变更的可预测性，导致响应式更新、时间旅行等能力失效
• 可以正常使用的场景：
  • 局部封闭的逻辑（比如工具函数内部、小范围独立业务逻辑）：你可以完全掌控引用关系的范围，此时引用修改的性能更高，代码也更简洁
  • 明确约定了可变数据的场景：比如你封装的方法对外明确说明会修改入参数组，调用方有明确预期的前提下可以正常使用

内容的提问来源于stack exchange，提问作者Spinik Lee