彻底剖析JavaScript中的深拷贝与浅拷贝，低门槛轻松理解

前端

2023-11-04 06:20:16

深入浅出，揭开深拷贝与浅拷贝的神秘面纱

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

基本类型
- 基本类型在赋值时是复制其值。这意味着如果将一个基本类型变量的值赋给另一个基本类型变量，则新变量将获得一个与原始变量相同的值。
- 基本类型变量的值是独立的，这意味着对一个基本类型变量的值进行更改不会影响其他变量的值。
引用类型
- 引用类型在赋值时是复制其引用。这意味着如果将一个引用类型变量的值赋给另一个引用类型变量，则新变量将获得一个指向原始变量的引用。
- 引用类型变量的值不是独立的，这意味着对一个引用类型变量的值进行更改也会影响其他变量的值。

浅尝辄止，领略浅拷贝的魅力

浅拷贝只复制引用类型变量的值，而深拷贝则复制引用类型变量的值和其所有属性的值。

浅拷贝
- 浅拷贝只复制引用类型变量的值。这意味着如果将一个引用类型变量的值赋给另一个引用类型变量，则新变量将获得一个指向原始变量的引用。
- 浅拷贝不会复制引用类型变量的属性值。这意味着如果对原始变量的属性值进行更改，则新变量的属性值也会发生更改。
深拷贝
- 深拷贝复制引用类型变量的值和其所有属性的值。这意味着如果将一个引用类型变量的值赋给另一个引用类型变量，则新变量将获得一个指向新对象的引用。
- 深拷贝会复制引用类型变量的属性值。这意味着如果对原始变量的属性值进行更改，则新变量的属性值不会发生更改。

巧用深拷贝，实现数据克隆的艺术

在JavaScript中，我们可以使用多种方法实现深拷贝。最常用的方法是使用JSON.parse()和JSON.stringify()方法。

使用JSON.parse()和JSON.stringify()方法实现深拷贝

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

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

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }
console.log(obj2); // { name: 'Jane Doe', age: 30, address: { street: '123 Main Street', city: 'Anytown', state: 'CA', zip: '12345' } }

在这个例子中，我们首先创建一个对象obj1。然后，我们使用JSON.stringify()方法将对象obj1转换为JSON字符串。接下来，我们使用JSON.parse()方法将JSON字符串转换为对象obj2。最后，我们修改对象obj2的name属性值。

我们可以看到，修改对象obj2的name属性值不会影响对象obj1的name属性值。这是因为JSON.parse()和JSON.stringify()方法实现了对象的深拷贝。

掌握深拷贝与浅拷贝，轻松驾驭数据赋值

在JavaScript中，深拷贝和浅拷贝都是非常重要的概念。理解并掌握深拷贝和浅拷贝的区别，可以帮助我们更好地管理数据，避免出现意外的错误。

何时使用浅拷贝？
- 浅拷贝通常用于需要快速复制数据的情况。例如，当我们需要将一个对象传递给一个函数时，我们可以使用浅拷贝来复制对象。
- 浅拷贝也用于需要共享数据的情况。例如，当我们需要在多个组件之间共享数据时，我们可以使用浅拷贝来共享数据。
何时使用深拷贝？
- 深拷贝通常用于需要克隆数据的情况。例如，当我们需要创建一个与原始数据完全独立的新数据时，我们可以使用深拷贝来克隆数据。
- 深拷贝也用于需要保护数据的情况。例如，当我们需要防止原始数据被意外更改时，我们可以使用深拷贝来保护数据。