JavaScript数组深浅拷贝详解

JavaScript数组拷贝看似简单，实则暗藏陷阱：展开运算符`[...array]`等方法仅实现浅拷贝，对嵌套对象只复制引用，导致修改副本时意外污染原始数据；真正安全的副本需同时拷贝数组结构和内部对象——推荐用`map(() => ({ ...obj }))`实现轻量、清晰、无副作用的“双重浅拷贝”，兼顾性能与可靠性；而JSON序列化虽能深拷贝却存在数据丢失风险，复杂场景应优先选择显式结构化赋值。理解这一本质差异，是写出健壮前端数据逻辑的关键一步。

使用展开运算符 `[...array]` 只会创建数组的浅拷贝，无法隔离嵌套对象的修改；若需独立修改副本中的对象属性而不影响原数组，必须进行深拷贝或逐项结构化复制。

在 JavaScript 中，数组拷贝常被误解为“完全复制”，但实际行为取决于数据类型：对于基础类型（如字符串、数字），浅拷贝已足够；而对于包含对象或嵌套结构的数组，浅拷贝仅复制对象引用，而非对象本身。这正是你遇到问题的根本原因。

以你的代码为例：

var users = [
  { userUID: '123', userName: 'TOTO' },
  { userUID: '345', userName: 'TITI' },
  { userUID: '678', userName: 'TATA' }
];
var list = [...users]; // ❌ 浅拷贝：list 和 users 指向同一组对象
var listModified = list.map(x => {
  if (x.userUID === '678') x.userName = ''; // ⚠️ 直接修改原对象！
  return x;
});
console.log(users[2].userName); // 输出 '' —— 原数组已被意外修改！

这里 list.map() 并未返回新对象，而是直接赋值修改了 x.userName —— 而 x 是对原始对象的引用，因此 users 也被波及。

✅ 正确做法：避免副作用，创建真正独立的副本

方案一：结构化展开（推荐，轻量且语义清晰）

适用于对象结构简单、无函数/日期/undefined/循环引用等场景：

const list = users.map(obj => ({ ...obj })); // ✅ 每个对象都新建一份
const listModified = list.map(x =>
  x.userUID === '678' ? { ...x, userName: '' } : x
);
console.log(users[2].userName); // 'TATA' —— 原数组完好无损

? 提示：{ ...obj } 是对象浅拷贝，但结合 map() 对每个元素单独执行，就实现了“数组+元素”的双重浅拷贝，足以满足大多数 UI 数据处理需求。

方案二：JSON 序列化（谨慎使用）

适合纯数据对象（仅含字符串、数字、布尔、null、数组、普通对象）：

const list = JSON.parse(JSON.stringify(users)); // ✅ 深拷贝（但有局限性）
const listModified = list.map(x =>
  x.userUID === '678' ? { ...x, userName: '' } : x
);

⚠️ 注意：JSON.stringify() 会忽略 undefined、函数、Symbol、Date 对象（转为空字符串）、RegExp 等，且无法处理循环引用，生产环境慎用。

方案三：使用结构化赋值 + 显式映射（最安全可控）

尤其适合需条件更新且逻辑复杂的场景：

const listModified = users.map(user =>
  user.userUID === '678'
    ? { ...user, userName: '' } // 创建新对象，不修改原 user
    : { ...user } // 保持其他项也为新对象副本
);
// users 数组及其内部对象均未被修改

? 关键总结

• [...arr]、arr.slice()、Array.from(arr) 都只做数组层级的浅拷贝；
• 对象内的属性修改仍会影响原数据，因对象引用未变；
• 真隔离 = 数组拷贝 + 每个对象独立拷贝；
• 优先选用 map(() => ({ ...obj })) 实现可读、高效、无副作用的副本生成；
• 避免在 .map() 中直接修改 x.prop = value，.map() 的本意是“转换并返回新值”，而非“就地变更”。

掌握这一区别，才能写出可靠、可维护的数据处理逻辑。

理论要掌握，实操不能落！以上关于《JavaScript数组深浅拷贝详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！