展开运算符(...)与深拷贝虽然都能生成新的对象,但在不可变数据场景中,它们的行为、适用范围及潜在风险截然不同。先明确一点:展开运算符仅执行浅拷贝,对嵌套对象无效;深拷贝则能彻底隔离嵌套结构,但需注意性能开销与循环引用问题。

展开运算符:快速但仅作用于第一层
展开运算符常用于数组或对象的“表层”复制,语法简洁且执行效率较高。然而,它只复制第一层属性的值——基本类型为值拷贝,引用类型仅为地址拷贝。
- 适用于扁平结构,例如更新对象顶层字段:
const newObj = { ...oldObj, name: 'Alice' }; - 对嵌套对象完全无力。举例说明:
const user = { profile: { age: 30 } }; const copy = { ...user }; copy.profile.age = 31;→ 结果user.profile.age会同步变为 31 - 无法处理函数、Date、RegExp 等特殊对象,它们依然只是被浅层引用
深拷贝:彻底但需付出代价
深拷贝会递归复制所有层级,确保原始数据与副本完全独立。常见实现包括 JSON.parse(JSON.stringify())、结构化克隆(structuredClone())或 Lodash 的 cloneDeep。
structuredClone()是目前推荐方案,支持 Map、Set、Date、RegExp 及嵌套对象,还能处理部分环境下的循环引用JSON方式虽简单,但限制明显:丢失函数、undefined、Symbol、BigInt,不支持循环引用,Date 也会转为字符串- 深拷贝的开销不容忽视,尤其是大型嵌套对象可能引发性能瓶颈或内存压力
不可变更新中的实际选择策略
真正的不可变性并非必须“深拷贝”。关键在于修改时精准切断引用链。多数场景下,推荐组合使用展开运算符与手动深层覆盖,而非无脑采用深拷贝。
- 更新深层字段时逐层展开:
{ ...state, user: { ...state.user, profile: { ...state.user.profile, age: 31 } } } - 对于复杂嵌套结构,可封装工具函数,或使用 Immer 这类库,在保持代码可读性的同时自动处理不可变更新
- 仅在结构动态未知或嵌套极深时,才考虑
structuredClone;避免在高频操作(如渲染循环)中频繁调用
关键区别一句话总结
展开运算符是轻量、可控、易推理的浅层不可变操作;深拷贝是重型、彻底但可能低效或失真的全量隔离手段。选择哪种方案,取决于数据形状、变更深度及运行环境约束。
需要强调的是,没有任何一种方案是万能的。理解每种方法的适用边界,才能在不可变数据的实践中真正做到游刃有余。
