js-深拷贝

「这是我参与2022首次更文挑战的第26天，活动详情查看：2022首次更文挑战」

深拷贝

介绍

上篇文章讲述了 浅拷贝 ，那么自然会有 深拷贝。

由于 浅拷贝 对引用类型的拷贝时，仅仅只能拷贝其第一层，或者说只拷贝引用类型的指针，并没有对存放在 堆内存 中的该引用类型数据进行全部数据的拷贝。

所以 深拷贝 的出现，就是为了解决 浅拷贝 存在的上面。

深拷贝

这里介绍常见的深拷贝的方法

• JSON.stringify()

可以通过 JSON 的方法进行拷贝，也是目前比较常用的 js 深拷贝方式之一。

通过利用 JSON 的两个方法，JSON.stringify 和 JSON.parse

通过 JSON.parse(JSON.stringify(obj)) 来进行深拷贝。

但是会存在问题：例如

• 无法 深拷贝 基本类型 里面的 bigint

  会进行报错提示，这是要注意的点

• 也无法处理 undefined ， symbol 和 NaN 值

  

  可以看到 会将 他们的结果变成 null 值

• 无法处理 函数 和 正则

  在对 函数 和 正则 处理的时候，结果是不一样的

  • 会将 函数 变成 null

  • 会将 正则 变成 空对象 {}

      const arr3 = [
        () => {
          console.log(123)
        },
        /^[0-9]*$/,
      ]
  复制代码

  结果为

  [ null, {} ]
  复制代码

• 深拷贝实现

  通过 循环递归的方式，进行深拷贝

  如果遇到基本数据类型的 string number boolean undefined 的话，可以直接进行返回当前的数据类型值

  如果遇到 null ，function，regexp，data，这类数据的话，也是可以直接返回。

  注意下 symbol 是不可枚举的，会需要通过 getOwnPropertySymbols 这个方法，来进行。

  const deepCopy = (object) => {
    if (!object || typeof object !== 'object') return
  
    let newObject = Array.isArray(object) ? [] : {}
  
    for (let key in object) {
      if (object.hasOwnProperty(key)) {
        newObject[key] = typeof object[key] === 'object' ? deepCopy(object[key]) : object[key]
      }
    }
  
    return newObject
  }
  复制代码

总结

深拷贝 既能够对基本数据类型的值，进行精确的拷贝。 也能够对引用类型的数据值 进行全部拷贝。

会获得一个与 被拷贝的数据 全新的 一模一样的值。