探寻JavaScript基础心法：浅拷贝与深拷贝的奥秘

2024-01-03 23:41:24

浅拷贝与深拷贝：概念解析

在JavaScript中，变量可以存储两种类型的值：原始类型和引用类型。原始类型的值直接存储在变量中，而引用类型的值则存储在内存中的某个地址，变量本身只存储该地址。

当对原始类型的值进行赋值时，会创建一个新的值，而不会影响原值。例如：

let num1 = 10;
let num2 = num1;

num2 = 20;

console.log(num1); // 输出：10

在这个例子中，num1和num2都是原始类型的值，当num2被赋值为20时，不会影响num1的值。

对于引用类型的值，情况就不同了。当对引用类型的值进行赋值时，实际上只是复制了该值的地址，而不是创建一个新的值。例如：

let obj1 = { name: 'John' };
let obj2 = obj1;

obj2.name = 'Mary';

console.log(obj1.name); // 输出：Mary

在这个例子中，obj1和obj2都是引用类型的值，当obj2.name被赋值为'Mary'时，obj1.name的值也随之改变。这是因为obj1和obj2指向同一个内存地址，对其中一个值的更改会影响另一个值。

浅拷贝与深拷贝：实现方式

浅拷贝是指只复制对象的引用，而深拷贝是指复制对象本身及其所有属性，包括嵌套对象。

在JavaScript中，可以使用两种方法实现浅拷贝：

使用赋值运算符（=）

let obj1 = { name: 'John' };
let obj2 = obj1;

这种方法只复制了obj1的引用，因此obj2和obj1指向同一个内存地址。对其中一个对象的更改会影响另一个对象。

使用Object.assign()方法

let obj1 = { name: 'John' };
let obj2 = Object.assign({}, obj1);

Object.assign()方法可以将obj1的属性复制到obj2中，但不会复制obj1的引用。因此，obj2和obj1是两个独立的对象，对其中一个对象的更改不会影响另一个对象。

在JavaScript中，可以使用两种方法实现深拷贝：

使用JSON.parse()和JSON.stringify()方法

let obj1 = { name: 'John' };
let obj2 = JSON.parse(JSON.stringify(obj1));

这种方法将obj1转换为JSON字符串，然后将其解析回JavaScript对象。这样可以创建一个obj1的副本，该副本与obj1完全独立。

使用递归算法

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

  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }

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

  return newObj;
}

let obj1 = { name: 'John', address: { city: 'New York' } };
let obj2 = deepCopy(obj1);

obj2.name = 'Mary';
obj2.address.city = 'Los Angeles';

console.log(obj1); // 输出：{ name: 'John', address: { city: 'New York' } }