你以为JavaScript拷贝就是复制粘贴？NO！还有深浅之分

2023-02-08 16:27:59

浅拷贝与深拷贝：揭开 JavaScript 拷贝的奥秘

前言

复制粘贴，是我们在日常生活中经常使用的一种快捷操作。在编程的世界里，拷贝操作同样必不可少。然而，在 JavaScript 中，拷贝却不仅仅是简单的复制粘贴，它还暗藏着深浅之分。今天，我们就来深入探秘 JavaScript 中的浅拷贝与深拷贝。

浅拷贝：复制表象

浅拷贝就像表面上的复制，它只拷贝对象的引用，并不复制对象内部的值。简单来说，就是复制一个指向对象内存地址的指针。因此，当我们修改浅拷贝后的对象时，原始对象也会受到影响，因为它们指向同一个内存地址。

深拷贝：深入骨髓

深拷贝则是彻底的复制，它不仅拷贝对象的引用，还拷贝对象内部的所有值。这意味着，深拷贝后的对象与原始对象完全独立，对其中一个对象进行修改，不会影响另一个对象。

浅拷贝与深拷贝的区别

浅拷贝和深拷贝的区别，在于它们复制的深度不同。浅拷贝只复制表象，深拷贝则深入骨髓。

浅拷贝：

只复制对象的引用
两个变量指向同一个对象
修改一个对象，另一个对象也会受到影响

深拷贝：

复制对象的引用和所有值
两个变量指向不同的对象
修改一个对象，另一个对象不受影响

实现浅拷贝和深拷贝

实现浅拷贝和深拷贝的方法有很多，下面提供两种最常用的手写实现：

浅拷贝：

function shallowCopy(obj) {
  return Object.assign({}, obj);
}

深拷贝：

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;
}