浅拷贝与深拷贝：全面理解JavaScript数据克隆

2023-10-23 23:01:30

浅拷贝与深拷贝概述

浅拷贝和深拷贝都是JavaScript中复制数据的方式，但它们在复制方式上存在根本差异。

浅拷贝：浅拷贝只复制数据变量的引用，而不是复制数据的实际值。这意味着浅拷贝后，原始数据变量和复制的数据变量指向同一个内存地址。如果原始数据变量的值发生改变，复制的数据变量的值也会跟着改变。
深拷贝：深拷贝复制数据变量的实际值，创建一个新的内存地址来存储复制的数据。这意味着深拷贝后，原始数据变量和复制的数据变量指向不同的内存地址。如果原始数据变量的值发生改变，复制的数据变量的值不会受到影响。

浅拷贝与深拷贝实现

浅拷贝：

// 原始数据变量
const obj1 = {
  name: 'John Doe',
  age: 30
};

// 浅拷贝
const obj2 = obj1;

// 改变原始数据变量的值
obj1.name = 'Jane Doe';

// 输出obj2的值
console.log(obj2.name); // 输出：Jane Doe

在上面的例子中，obj2是对obj1的浅拷贝，当我们改变obj1的值时，obj2的值也会跟着改变。这是因为浅拷贝只复制了数据变量的引用，而不是复制数据的实际值。

深拷贝：

// 原始数据变量
const obj1 = {
  name: 'John Doe',
  age: 30
};

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

// 改变原始数据变量的值
obj1.name = 'Jane Doe';

// 输出obj2的值
console.log(obj2.name); // 输出：John Doe