一文看懂JavaScript中的深拷贝与浅拷贝

理解JavaScript中的数据类型

在JavaScript中，数据类型分为基本类型和引用类型。基本类型包括数字、字符串、布尔值、undefined和null。引用类型包括对象、数组和函数。

• 基本类型 ：基本类型的值直接存储在变量中。当对基本类型进行赋值时，会创建一个新的变量，该变量与原变量独立存在。例如：

let a = 10;
let b = a;
b++;
console.log(a); // 输出：10
console.log(b); // 输出：11

• 引用类型 ：引用类型的值存储在内存中，变量中存储的是该值的内存地址。当对引用类型进行赋值时，会创建一个新的变量，但该变量指向与原变量相同的内存地址。这意味着对新变量的更改也会反映在原变量中。例如：

let a = { name: 'John Doe' };
let b = a;
b.name = 'Jane Doe';
console.log(a.name); // 输出：Jane Doe
console.log(b.name); // 输出：Jane Doe

深拷贝与浅拷贝的概念

• 深拷贝 ：深拷贝是指创建一个新变量，该变量与原变量完全独立，对新变量的更改不会影响原变量。深拷贝会递归地复制对象或数组中的所有元素，包括嵌套的对象或数组。

• 浅拷贝 ：浅拷贝是指创建一个新变量，该变量指向与原变量相同的内存地址，对新变量的更改也会反映在原变量中。浅拷贝只复制对象或数组的顶层元素，不会递归地复制嵌套的对象或数组。

深拷贝与浅拷贝的实现方法

在JavaScript中，可以通过多种方法实现深拷贝和浅拷贝。

深拷贝

• 使用JSON.parse()和JSON.stringify() ：JSON.parse()和JSON.stringify()方法可以实现深拷贝。JSON.stringify()方法将对象或数组转换为JSON字符串，JSON.parse()方法将JSON字符串转换为对象或数组。例如：

let a = { name: 'John Doe' };
let b = JSON.parse(JSON.stringify(a));
b.name = 'Jane Doe';
console.log(a.name); // 输出：John Doe
console.log(b.name); // 输出：Jane Doe

• 使用递归 ：也可以使用递归来实现深拷贝。递归是指函数调用自身。在深拷贝的递归实现中，函数会遍历对象或数组中的所有元素，并为每个元素创建一个新的副本。例如：

function deepCopy(obj) {
  if (typeof obj === 'object') {
    let newObj = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
      newObj[key] = deepCopy(obj[key]);
    }
    return newObj;
  } else {
    return obj;
  }
}

let a = { name: 'John Doe' };
let b = deepCopy(a);
b.name = 'Jane Doe';
console.log(a.name); // 输出：John Doe
console.log(b.name); // 输出：Jane Doe

浅拷贝

• 使用Object.assign() ：Object.assign()方法可以实现浅拷贝。Object.assign()方法将一个或多个对象的属性复制到目标对象。例如：

let a = { name: 'John Doe' };
let b = Object.assign({}, a);
b.name = 'Jane Doe';
console.log(a.name); // 输出：John Doe
console.log(b.name); // 输出：Jane Doe

• 使用扩展运算符(...) ：扩展运算符(...)也可以实现浅拷贝。扩展运算符将对象或数组展开成一组元素。例如：

let a = { name: 'John Doe' };
let b = { ...a };
b.name = 'Jane Doe';
console.log(a.name); // 输出：John Doe
console.log(b.name); // 输出：Jane Doe

总结

深拷贝与浅拷贝是JavaScript中常用的两种数据拷贝方式。深拷贝会创建一个新变量，该变量与原变量完全独立，对新变量的更改不会影响原变量。浅拷贝会创建一个新变量，该变量指向与原变量相同的内存地址，对新变量的更改也会反映在原变量中。

在实际开发中，应根据具体情况选择使用深拷贝还是浅拷贝。如果需要对对象或数组进行独立的修改，则应使用深拷贝。如果只需要对对象或数组进行临时性的修改，则可以使用浅拷贝。