使用展开运算符 `[...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/循环引用等场景：
立即学习“Java免费学习笔记（深入）”；
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() 的本意是“转换并返回新值”，而非“就地变更”。
掌握这一区别，才能写出可靠、可维护的数据处理逻辑。
