浅谈深拷贝和JavaScript深拷贝实现过程中的精妙设计

前端

2023-09-01 05:44:41

近年来，在关于JavaScript的各种手写代码文章中，我们能看到很多JavaScript Api的手写实现。但其中有很多代码实现并不合格，质量较低。为此，笔者决定从最简单的深拷贝开始，对JavaScript的深拷贝进行深入讲解。

深拷贝的基本概念

浅拷贝和深拷贝

浅拷贝 ：浅拷贝只会拷贝对象或数组的引用地址，而不是实际的值。因此，如果我们对浅拷贝的对象进行修改，源对象也会受到影响。
深拷贝 ：深拷贝会创建源对象或数组的一个新副本，并把它的值也拷贝过来。这样，即使我们对深拷贝的对象进行修改，源对象也不会受到影响。

什么时候使用深拷贝

深拷贝主要用于以下几种场景：

当我们需要对对象或数组进行修改时，但又不想影响到源对象或数组。
当我们需要将对象或数组传递给其他函数或组件时，但又不想让这些函数或组件能够修改源对象或数组。
当我们需要将对象或数组存储在数据库或缓存中时，但又不想让这些存储机制能够修改源对象或数组。

JavaScript 深拷贝实现过程中的精妙设计

类型判断与递归处理

JavaScript 中的对象和数组都可以用Object.prototype.toString()方法来判断其类型，常见的数据类型判断如下：

对象：[object Object]
数组：[object Array]
字符串：[object String]
数字：[object Number]
布尔值：[object Boolean]
空值：[object Null]
未定义：[object Undefined]

当我们遇到对象或数组时，我们需要递归地对它们进行深拷贝。这意味着我们需要对它们的每一个元素进行深拷贝。

特殊数据结构的处理

除了基本的数据类型之外，JavaScript 中还有一些特殊的数据结构，例如日期对象、函数对象、正则表达式对象等。对于这些特殊的数据结构，我们需要特殊处理才能实现深拷贝。

例如，对于日期对象，我们可以使用new Date(date.getTime())方法来创建一个新的日期对象，并将其值设置为源日期对象的值。

对于函数对象，我们可以使用Function.prototype.bind()方法来创建一个新的函数对象，并将其上下文设置为源函数对象。

对于正则表达式对象，我们可以使用new RegExp(reg.source, reg.flags)方法来创建一个新的正则表达式对象，并将其源字符串和标志设置为源正则表达式对象的值。

实际应用示例

function deepCopy(obj) {
  // 判断数据类型
  const type = Object.prototype.toString.call(obj);

  // 复制基本数据类型
  if (type === "[object String]" || type === "[object Number]" || type === "[object Boolean]" || type === "[object Null]" || type === "[object Undefined]") {
    return obj;
  }

  // 复制日期对象
  if (type === "[object Date]") {
    return new Date(obj.getTime());
  }

  // 复制数组
  if (type === "[object Array]") {
    const copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
    return copy;
  }

  // 复制对象
  if (type === "[object Object]") {
    const copy = {};
    for (const key in obj) {
      copy[key] = deepCopy(obj[key]);
    }
    return copy;
  }

  // 复制特殊数据结构
  // 省略其他特殊数据结构的处理代码

  // 对于无法处理的数据类型，直接返回源对象
  return obj;
}

通过上面提供的示例代码，相信大家对JavaScript深拷贝的实现有了一定的理解。接下来，让我们以两个具体的应用场景为例，进一步讲解深拷贝的妙用。

深拷贝在实际场景中的妙用

场景 1：数据修改场景

比如，我们需要对一个对象的某个属性进行修改，但又不想影响到源对象。这个时候，我们就可以使用深拷贝来创建一个新的对象，然后对这个新的对象进行修改。

const obj = {
  name: "John",
  age: 20,
};

// 创建一个深拷贝的对象
const copy = deepCopy(obj);

// 修改深拷贝对象中的属性
copy.name = "Mary";
copy.age = 25;

// 源对象不受影响
console.log(obj); // { name: "John", age: 20 }

场景 2：数据传递场景

比如，我们需要将一个对象传递给一个函数，但又不想让这个函数能够修改源对象。这个时候，我们就可以使用深拷贝来创建一个新的对象，然后将这个新的对象传递给函数。

function modifyObject(obj) {
  obj.name = "Mary";
}

const obj = {
  name: "John",
  age: 20,
};

// 创建一个深拷贝的对象
const copy = deepCopy(obj);

// 将深拷贝对象传递给函数
modifyObject(copy);

// 源对象不受影响
console.log(obj); // { name: "John", age: 20 }