JavaScript 数组赋值与展开运算符赋值的本质区别

本文详解 javaScript 中 const arr2 = arr1（引用赋值）与 const arr2 = […arr1]（浅拷贝赋值）的核心差异，通过代码对比阐明内存行为、可变性影响及深层嵌套场景下的表现。

本文详解 javascript 中 `const arr2 = arr1`（引用赋值）与 `const arr2 = […arr1]`（浅拷贝赋值）的核心差异，通过代码对比阐明内存行为、可变性影响及深层嵌套场景下的表现。

在 javascript 中，将一个数组赋值给另一个变量看似简单，但不同写法背后涉及内存引用机制的根本差异。理解这一点，是避免意外数据污染、实现可靠状态管理的关键。

引用赋值：共享同一内存地址

使用 const arr2 = arr1 时，arr2 并未创建新数组，而是直接指向 arr1 所引用的同一块内存地址。二者本质上是同一个对象：

const arr1 = [1, 2, 3]; const arr2 = arr1; // 引用赋值  console.log(arr1 === arr2); // true arr2.push(4); console.log(arr1); // [1, 2, 3, 4] ← arr1 也被修改！

任何对 arr2 的修改（如 push、pop、索引赋值等）都会同步反映在 arr1 上——因为它们操作的是同一个数组实例。

展开运算符赋值：创建浅拷贝

而 const arr2 = […arr1] 利用扩展语法（spread syntax）生成一个新的数组实例，其元素为 arr1 各项的副本（第一层值拷贝）：

立即学习“Java免费学习笔记（深入）”；

const arr1 = [1, 2, 3]; const arr2 = [...arr1]; // 浅拷贝  console.log(arr1 === arr2); // false arr2[0] = 9; console.log(arr1); // [1, 2, 3] ← 不受影响 console.log(arr2); // [9, 2, 3]

此时 arr1 与 arr2 独立存在，互不干扰——这是实现不可变更新（immutable update）的常用模式，尤其在 React、Redux 等强调状态不可变性的场景中至关重要。

⚠️ 注意：浅拷贝的局限性

需特别注意，“浅拷贝”仅复制数组第一层级的值。若原数组包含对象或嵌套数组，这些内部引用仍被共享：

const arr1 = [1, 2, [5, 6]]; const arr2 = [...arr1]; // 浅拷贝  arr2[2][0] = 9; // 修改嵌套数组 console.log(arr1[2][0]); // 9 ← arr1 也被影响！ console.log(arr1[2] === arr2[2]); // true ← 嵌套数组引用相同

如需完全隔离（深拷贝），应使用 structuredClone()（现代环境）、json.parse(JSON.stringify())（仅限纯数据）或专用库如 Lodash 的 cloneDeep()。

总结：何时用哪种方式？

• ✅ 用 arr2 = […arr1]：需要独立副本、防止副作用、实现不可变操作（如更新 ui 状态）。
• ✅ 用 arr2 = arr1：明确需要双向同步（如多个视图共用同一数据源），或性能敏感且确定不会意外修改。
• ❌ 避免混淆：切勿在预期“独立副本”的逻辑中误用引用赋值，否则将引发难以追踪的数据一致性问题。

掌握这一区别，是写出健壮、可维护 JavaScript 数组操作代码的基础。