015JS深拷贝封装支持string,number,bool,null,undefined,symbol,object,array,date,function

015JS深拷贝封装支持string,number,bool,null,undefined,symbol,object,array,date,function

JS深拷贝可使用第三方库https://www.npmjs.com/package/lodash.clonedeep，也可以手工实现。

JS深拷贝方案1：JSON.parse(JSON.stringify(obj))

let a = {a:1,b:2}
let b = JSON.parse(JSON.stringify(a))
a.a = 11
console.log(a)//{a:1,b:2}
console.log(b)//{a:11,b:2}

JS深拷贝方案2：递归函数实现深拷贝

function deepClone(source) {
  if (typeof source !== 'object' || source == null) {
    return source;
  }
  const target = Array.isArray(source) ? [] : {};
  for (const key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      if (typeof source[key] === 'object' && source[key] !== null) {
        target[key] = deepClone(source[key]);
      } else {
        target[key] = source[key];
      }
    }
  }
  return target;
}

JS深拷贝方案3：递归函数实现深拷贝2-解决循环引用和symblo类型

function cloneDeep(source, hash = new WeakMap()) {
  if (typeof source !== 'object' || source === null) {
    return source;
  }
  if (hash.has(source)) {
    return hash.get(source);
  }
  const target = Array.isArray(source) ? [] : {};
  Reflect.ownKeys(source).forEach(key => {
    const val = source[key];
    if (typeof val === 'object' && val != null) {
      target[key] = cloneDeep(val, hash);
    } else {
      target[key] = val;
    }
  })
  return target;
}

JS深拷贝方案4：兼容多种数据类型

const deepClone = (source, cache) => {
  if(!cache){
    cache = new Map() 
  }
  if(source instanceof Object) { // 不考虑跨 iframe
    if(cache.get(source)) { return cache.get(source) }
    let result 
    if(source instanceof Function) {
      if(source.prototype) { // 有 prototype 就是普通函数
        result = function(){ return source.apply(this, arguments) }
      } else {
        result = (...args) => { return source.call(undefined, ...args) }
      }
    } else if(source instanceof Array) {
      result = []
    } else if(source instanceof Date) {
      result = new Date(source - 0)
    } else if(source instanceof RegExp) {
      result = new RegExp(source.source, source.flags)
    } else {
      result = {}
    }
    cache.set(source, result)
    for(let key in source) { 
      if(source.hasOwnProperty(key)){
        result[key] = deepClone(source[key], cache) 
      }
    }
    return result
  } else {
    return source
  }
}

深拷贝改进代码(推荐采用)

export function DeepClone(data: any): any {
  if (data && typeof data === 'object') {
    // 处理：object,array,date,function
    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]':
        const arr = [];
        for (let i = 0; i < data.length; i++) {
          arr[i] = DeepClone(data[i]);
        }
        return arr;

      // js自带对象或用户自定义类实例
      case '[object Object]':
        const obj: any = {};
        for (let key in data) {
          // 会遍历原型链上的属性方法，可以用obj.hasOwnProperty(prop)来控制
          obj[key] = DeepClone(data[key]);
        }
        return obj;
    }

    // 针对函数的拷贝
    if (typeof data === 'function') {
      let func = data.bind(null);
      func.prototype = DeepClone(data.prototype);
      return func;
    }
  } else {
    // 处理：string,number,bool,null,undefined,symbol
    return data;
  }
}

深拷贝使用方法

import { DeepClone } from '@/utils/DeepClone';
const newObj = DeepClone(obj);