js 实现深拷贝（全）-Toy模板网

这篇具有很好参考价值的文章主要介绍了js 实现深拷贝（全）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、使用第三方库

使用 lodash 的 cloneDeep() 方法（详情可见 lodash 中文官网）

import lodash from 'lodash';

let obj = {
  a: {
    b: '阿潔'
  },
  c: '深拷贝'
}

const newObj = lodash.cloneDeep(obj)

二、简单深拷贝

除了基本数据类型（null、string、boolean、undefined、number、symbol），引用数据类型中如果对象中不存在时间类型和正则表达式等类型对象，则可用简单的JSON序列化进行转化。

let cloneObj = JSON.parse(JSON.stringify(obj))

注意：如果对象内容项为undefined,null,Date,RegExp、function… 则不推荐使用此深拷贝可能会出问题文章来源地址https://www.toymoban.com/news/detail-603803.html

三、递归版

1、考虑到存在Date和正则表达式的深拷贝（考虑最全相对复杂的一种深拷贝）

export function cloneDeep(data) {
  //string,number,bool,null,undefined,symbol
  //object,array,date
  if (data && typeof data === "object") {
    //针对函数的拷贝
    if (typeof data === "function") {
      let tempFunc = data.bind(null);
      tempFunc.prototype = cloneDeep(data.prototype);
      return tempFunc;
    }
    // 根据不同的数据类型的深拷贝
    switch (Object.prototype.toString.call(data)) {
      case "[object String]":
        return data.toString();
      case "[object Number]":
        return Number(data.toString());
      case "[object Boolean]":
        return new Boolean(data.toString());
      case "[object Date]":
        return new Date(data.getTime());
      case "[object Array]":
        var arr = [];
        for (let i = 0; i < data.length; i++) {
          arr[i] = cloneDeep(data[i]);
        }
        return arr;

      //js自带对象或用户自定义类实例
      case "[object Object]":
        var obj = {};
        for (let key in data) {
          //会遍历原型链上的属性方法，可以用hasOwnProperty来控制 （obj.hasOwnProperty(prop)
          obj[key] = cloneDeep(data[key]);
        }
        return obj;
    }
  } else {
    //string,number,bool,null,undefined,symbol
    return data;
  }
}

2、不考虑Date和正则表达式的深拷贝（上面的简化版，也是常用的一种）

function cloneDeep (target) {
  // 判断是否是对象
  if (typeof target === 'object') {
    // 兼容数组与对象
    let obj = Array.isArray(target) ? [] : {}
    for (let key in target) {
      obj[key] = cloneDeep(target[key])
    }
    return obj
  } else {
    return target
  }
}