美文网首页
Js深拷贝

Js深拷贝

作者: 衣裳云墨 | 来源:发表于2020-12-20 15:32 被阅读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))

    • 如果对象或者数组里有函数 或者包含不能转成JOSN格式, 就会出问题啦
    • RegExp/函数不会拷贝
    • new Date()会被转成字符串
    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)
    

    相关文章

      网友评论

          本文标题:Js深拷贝

          本文链接:https://www.haomeiwen.com/subject/uqdknktx.html