庖丁解牛：Javascript中的对象浅拷贝

前端

2024-01-24 06:15:55

当然可以，以下这篇技术文章就探讨了Javascript中的对象浅拷贝。

绪言

在浩瀚的编程世界中，对象无处不在。想要操控对象，就免不了要对其进行拷贝。拷贝对象的方式有很多，其中最常用、最简单的一种就是浅拷贝。浅拷贝，顾名思义，就是只拷贝对象本身的属性，而不会拷贝其嵌套的对象。

浅拷贝的实现

实现浅拷贝有很多种方法，最常见的有两种：

使用Object.assign()方法

Object.assign()方法可以将一个或多个源对象的属性复制到目标对象。如果源对象是嵌套对象，则只会拷贝源对象本身的属性，而不会拷贝其嵌套的对象。

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
};

const obj2 = Object.assign({}, obj1);

console.log(obj2); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }

使用扩展运算符（...）

扩展运算符(...)可以将一个数组或对象展开为单个元素。如果将一个嵌套对象用扩展运算符展开，则只会展开对象本身的属性，而不会展开其嵌套的对象。

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
};

const obj2 = { ...obj1 };

console.log(obj2); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }

浅拷贝与深拷贝的区别

浅拷贝和深拷贝的区别在于，浅拷贝只拷贝对象本身的属性，而不会拷贝其嵌套的对象；而深拷贝不仅拷贝对象本身的属性，还会拷贝其嵌套的对象。

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
};

const obj2 = Object.assign({}, obj1); // 浅拷贝

const obj3 = JSON.parse(JSON.stringify(obj1)); // 深拷贝

console.log(obj2); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }
console.log(obj3); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }

obj1.address.city = '上海';

console.log(obj2); // { name: '张三', age: 18, address: { city: '上海', street: '长安街' } }
console.log(obj3); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }

从上面的例子可以看出，浅拷贝只拷贝了obj1对象本身的属性，而没有拷贝其嵌套的对象address。因此，当修改obj1对象的address属性时，obj2对象的address属性也会随之改变。而深拷贝不仅拷贝了obj1对象本身的属性，还拷贝了其嵌套的对象address。因此，当修改obj1对象的address属性时，obj3对象的address属性不会随之改变。

浅拷贝的应用场景

浅拷贝在实际开发中有很多应用场景，例如：

克隆对象

浅拷贝可以用来克隆对象。克隆对象是指创建一个与原对象完全相同的新对象。浅拷贝只拷贝对象本身的属性，因此克隆出的对象与原对象是独立的，修改克隆对象不会影响原对象。

const obj1 = {
  name: '张三',
  age: 18,
  address: {
    city: '北京',
    street: '长安街'
  }
};

const obj2 = Object.assign({}, obj1);

console.log(obj2); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }

obj2.name = '李四';

console.log(obj1); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }
console.log(obj2); // { name: '李四', age: 18, address: { city: '北京', street: '长安街' } }

合并对象

浅拷贝可以用来合并对象。合并对象是指将两个或多个对象合并成一个新的对象。浅拷贝只拷贝对象本身的属性，因此合并后的对象只包含源对象的属性，而不会包含源对象的嵌套对象。

const obj1 = {
  name: '张三',
  age: 18
};

const obj2 = {
  address: {
    city: '北京',
    street: '长安街'
  }
};

const obj3 = Object.assign({}, obj1, obj2);

console.log(obj3); // { name: '张三', age: 18, address: { city: '北京', street: '长安街' } }