深入浅出JS深拷贝浅拷贝和数据存储

前端

2024-01-02 15:30:26

在JavaScript中，变量可以存储两种类型的数据：基本数据类型和引用数据类型。基本数据类型包括数字、字符串、布尔值和null。引用数据类型包括对象、数组和函数。

当您将一个基本数据类型的值复制给另一个变量时，新变量将获得该值的副本。这意味着对新变量所做的任何更改都不会影响原始变量的值。

当您将一个引用数据类型的值复制给另一个变量时，新变量将获得对原始变量的引用。这意味着对新变量所做的任何更改都会影响原始变量的值。

深拷贝和浅拷贝是两种不同的复制方式，用于复制引用数据类型的值。

浅拷贝只复制引用数据类型的值本身，而不复制其属性和方法。这意味着对浅拷贝所做的任何更改都不会影响原始变量的值。

深拷贝复制引用数据类型的值及其所有属性和方法。这意味着对深拷贝所做的任何更改都会影响原始变量的值。

什么时候应该使用深拷贝和浅拷贝呢？

浅拷贝通常用于不需要修改原始变量的值的情况。例如，如果您想创建一个新数组，并且不希望对原始数组所做的任何更改都影响到新数组，那么可以使用浅拷贝。

深拷贝通常用于需要修改原始变量的值的情况。例如，如果您想创建一个新对象，并且希望对新对象所做的任何更改都影响到原始对象，那么可以使用深拷贝。

实现深拷贝和浅拷贝

可以在JavaScript中使用多种方法来实现深拷贝和浅拷贝。

最简单的方法是使用Object.assign()方法。该方法可以实现浅拷贝。

const obj1 = {
  name: 'John Doe',
  age: 30
};

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

obj2.name = 'Jane Doe';

console.log(obj1.name); // John Doe
console.log(obj2.name); // Jane Doe

在上面的示例中，我们使用Object.assign()方法将obj1复制给obj2。obj2是一个浅拷贝，这意味着对obj2所做的任何更改都不会影响到obj1。

如果要实现深拷贝，可以使用递归函数。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const newObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    newObj[key] = deepCopy(obj[key]);
  }

  return newObj;
}

const obj1 = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA'
  }
};

const obj2 = deepCopy(obj1);

obj2.name = 'Jane Doe';
obj2.address.city = 'New York';

console.log(obj1.name); // John Doe
console.log(obj2.name); // Jane Doe
console.log(obj1.address.city); // Anytown
console.log(obj2.address.city); // New York