Object.assign() 和扩展运算符(...)

在 JavaScript 中,Object.assign() 和扩展运算符(...)都是浅拷贝(Shallow Copy)。它们只复制对象的第一层属性,不会递归复制嵌套的对象。

一、浅拷贝的特征:

  1. 第一层属性是值复制(基本类型直接复制值,引用类型复制地址引用)
  2. 嵌套对象是引用共享(修改嵌套对象会影响原对象)

二、验证示例:

const obj = {
  name: "John",
  address: { city: "New York" }
};

// 使用 Object.assign
const copy1 = Object.assign({}, obj);
// 使用扩展运算符
const copy2 = { ... obj };

// 修改第一层属性(互不影响)
copy1.name = "Alice";
console.log(obj.name);       // "John" (不变)

// 修改嵌套对象(会相互影响)
copy1.address.city = "London";
console.log(obj.address.city); // "London" (原对象被修改)

三、Object.assign 和扩展运算符的区别:

特性Object.assign()扩展运算符 ...
基本功能合并对象到目标对象展开对象/数组的属性
原型链属性不复制原型链上的属性不复制原型链上的属性
Symbol 属性可以复制可以复制
属性覆盖顺序后传入的覆盖同名属性后展开的覆盖同名属性
数组合并不支持支持([...arr1, ...arr2]
空值处理忽略 null/undefined 源对象抛出错误
函数调用方式Object.assign(target, ...sources)字面量内部 { ...obj }

四、深拷贝的解决方案

如果需要完全独立的副本,需使用深拷贝:

  1. 手动递归克隆
  2. JSON.parse(JSON.stringify(obj))
    (注意:会丢失函数/Symbol/undefined 等)
  3. 三方库
    如 Lodash 的 _.cloneDeep(obj)

五、关键总结

  • 两者都是浅拷贝:只复制第一层,嵌套对象共享引用
  • 🚫 不是深拷贝:无法创建嵌套对象的独立副本
  • 📌 优先使用扩展运算符(语法更简洁,是 JS 标准)
  • ⚠️ 嵌套对象需要额外处理才能实现深拷贝
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值