Js深拷贝

2020-12-20  本文已影响0人  衣裳云墨

1、vuex中深拷贝方法

/**
 * 深拷贝
 * @param {*} obj 拷贝对象(object or array)
 * @param {*} cache 缓存数组
 */
function deepCopy (obj, cache = []) {
  // typeof [] => 'object'
  // typeof {} => 'object'
  if (obj === null || typeof obj !== 'object') {
    return obj
  }
  // 如果传入的对象与缓存的相等, 则递归结束, 这样防止循环
  /**
   * 类似下面这种
   * var a = {b:1}
   * a.c = a
   * 资料: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value
   */
  const hit = cache.filter(c => c.original === obj)[0]
  if (hit) {
    return hit.copy
  }

  const copy = Array.isArray(obj) ?  [] :   {}
  // 将copy首先放入cache, 因为我们需要在递归deepCopy的时候引用它
  cache.push({
    original: obj,
    copy
  })
  Object.keys(obj).forEach(key => {
    copy[key] = deepCopy(obj[key], cache)
  })

  return copy
}

注: 如果要区分数组和对象, 使用使用 Array.isArray 或者 Object.prototype.toString.call

2、考虑了循环引用、symbol类型的情况

function copy(obj,appeard=new Map()) {
 if (!(obj instanceof Object)) return obj//如果是原始数据类型
    if (appeard.has(obj)) return appeard.get(obj)//如果已经出现过

    let result=Array.isArray(obj)?[]:{}
    appeard.set(obj,result)//将新对象放入map

    //遍历所有属性进行递归拷贝
    ;[...Object.keys(obj),...Object.getOwnPropertySymbols(obj)]
     .forEach(key=>result[key]=copy(obj[key],appeard))

    return result
}

2、使用JSON.parse(JSON.stringify(Object))

function stringifyRep(key, value) {
  if (typeof value === "function") {
    return `${value}`;
  }
  return value;
}
function parseRep(key, value) {
  return eval(value);
}
var a = {
  b: () => 1 + 1
}
var aa = JSON.parse(JSON.stringify(a, stringifyRep), parseRep)
上一篇下一篇

猜你喜欢

热点阅读