手把手教你使用JS轻松实现深拷贝

前端

2023-12-22 11:34:59

一、浅拷贝与深拷贝的概念

在JavaScript中，对象和数组都是引用类型，这意味着变量保存的只是对对象的引用，而不是对象的实际值。当对一个引用类型变量进行赋值时，实际上只是将一个变量的引用复制给另一个变量，两个变量指向同一个对象。这种拷贝方式称为浅拷贝。

浅拷贝只拷贝了对象的引用，并没有拷贝对象内部的属性值。如果对象内部的属性值也是引用类型，那么浅拷贝只会拷贝这些属性值的引用，而不是实际值。这意味着，如果在浅拷贝之后修改了对象的属性值，那么两个变量指向的对象都会受到影响。

深拷贝不仅拷贝了对象的引用，还拷贝了对象内部的属性值。如果对象内部的属性值也是引用类型，那么深拷贝也会拷贝这些属性值的实际值。这意味着，如果在深拷贝之后修改了对象的属性值，那么两个变量指向的对象不会受到影响。

二、JS深拷贝的实现过程

JS深拷贝的实现过程主要分为以下几个步骤：

判断目标对象的类型 ：首先，需要判断目标对象的类型。如果目标对象是基本类型（如字符串、数字、布尔值等），那么可以直接返回该值。
创建新的对象 ：如果目标对象是引用类型，那么需要创建一个新的对象。如果目标对象是对象，则可以使用Object.create(null)方法创建一个新的空对象。如果目标对象是数组，则可以使用[]创建一个新的空数组。
循环拷贝属性值 ：接下来，需要循环遍历目标对象的属性，并将属性值拷贝到新的对象中。如果属性值是基本类型，则可以直接拷贝。如果属性值是引用类型，则需要递归调用深拷贝函数来拷贝该属性值。
返回新的对象 ：最后，返回新的对象。

三、JS深拷贝的代码示例

以下是一个JS深拷贝函数的代码示例：

function deepCopy(obj) {
  // 判断目标对象的类型
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 创建新的对象
  let newObj = obj instanceof Array ? [] : {};

  // 循环拷贝属性值
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepCopy(obj[key]);
    }
  }

  // 返回新的对象
  return newObj;
}