JavaScript轻松了解对象浅拷贝和深拷贝

2023-09-17 17:49:43

在研究如何进行JavaScript对象拷贝之前，我们有必要先了解JavaScript中的数据类型。基本数据类型是指按值访问，且不可改变的数据。常见的基本数据类型包括数字、字符串和布尔值等。另一方面，对象数据类型则是通过引用访问，且可改变的数据。常见的对象数据类型包括对象和数组等。

我们通常所说的对象拷贝，本质上是对原始数据的拷贝。原始数据是指基本数据类型和对象数据类型。那么，原始数据的拷贝方式有哪几种呢？我们知道，在JavaScript中，对象拷贝主要分为浅拷贝和深拷贝。

浅拷贝只拷贝对象的第一层，而深拷贝则会拷贝对象的所有层级。也就是说，当我们进行浅拷贝时，我们只拷贝对象本身的属性，而不会拷贝对象内部的属性。而当我们进行深拷贝时，我们不仅会拷贝对象本身的属性，还会拷贝对象内部的属性，甚至会拷贝对象内部的属性的属性，依此类推。

JavaScript对象拷贝的实现方式

浅拷贝：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
  },
};

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

深拷贝：

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York',
    state: 'NY',
  },
};

const obj2 = JSON.parse(JSON.stringify(obj1));