洞悉JS深浅拷贝精髓，解锁数据操作新格局

前端

2023-11-09 09:06:11

初探深拷贝与浅拷贝

在JavaScript中，变量可以存储两种类型的数据：基本类型和引用类型。基本类型包括字符串、数字、布尔值等，它们直接保存在变量中。引用类型包括对象、数组和函数，它们在变量中保存的是一个指向实际数据的内存地址。

当您对基本类型变量进行赋值时，实际数据会被复制到新的变量中。这意味着对新变量的任何修改都不会影响原始变量。

当您对引用类型变量进行赋值时，变量中的内存地址会被复制到新的变量中。这意味着对新变量的任何修改都会影响原始变量，因为它们都指向同一个数据。

深拷贝和浅拷贝的异同

深拷贝和浅拷贝都是复制数据的方法，但它们在复制过程中的行为不同。

深拷贝： 深拷贝会递归复制数据结构中的所有内容，包括基本类型和引用类型。这意味着新变量中存储的数据与原始变量中的数据完全独立，对新变量的任何修改都不会影响原始变量。
浅拷贝： 浅拷贝只会复制数据结构中的基本类型，而引用类型只复制内存地址。这意味着新变量中存储的数据与原始变量中的数据共享引用，对新变量的任何修改都会影响原始变量。

选择深拷贝还是浅拷贝？

在实际开发中，您需要根据具体情况选择使用深拷贝还是浅拷贝。

使用深拷贝的情况：
- 当您需要对数据进行独立修改时，例如您需要在不影响原始数据的情况下修改一个数组中的元素。
- 当您需要将数据传递给其他函数或对象时，例如您需要将一个对象作为参数传递给一个函数。
使用浅拷贝的情况：
- 当您只需要对数据进行简单的复制时，例如您需要创建一个数组的副本以便在另一个地方使用。
- 当您知道不会对数据进行修改时，例如您需要将一个对象存储在本地存储中。

如何实现深拷贝和浅拷贝？

在JavaScript中，有几种方法可以实现深拷贝和浅拷贝。

使用Object.assign()方法： Object.assign()方法可以实现浅拷贝。它接受两个参数：目标对象和源对象。Object.assign()方法将源对象中的属性复制到目标对象中，如果目标对象中已经存在同名的属性，则会被源对象中的属性覆盖。

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

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

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30 }
console.log(obj2); // { name: 'Jane Doe', age: 30 }

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

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

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

obj2.name = 'Jane Doe';

console.log(obj1); // { name: 'John Doe', age: 30 }
console.log(obj2); // { name: 'Jane Doe', age: 30 }

使用递归函数： 您可以使用递归函数实现深拷贝。递归函数会遍历数据结构，并复制每个节点的数据。

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

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

const obj2 = deepCopy(obj1);

obj2.name = 'Jane Doe';
obj2.address.street = '456 Elm Street';

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: '456 Elm Street', city: 'Anytown', state: 'CA', zip: '12345' } }