深浅拷贝 深拷贝

复制对象没有保持和原对象一样的结构。因此,JSON 实现深复制不能处理指向相同引用的情况,相同的引用会被重复复制。

  • JSON.parse(JSON.stringify(data))

如果对象中存在循环引用的情况也无法正确实现深拷贝

如果 data 里面有时间对象, 则 JSON.stringify 后再 JSON.parse 的结果, 时间将只是字符串的形式,而不是时间对象

如果 data 里有函数, 则序列的结果会把函数置为 undefined

无法拷贝 copyObj 对象原型链上的属性和方法;

取不到值为 undefined 的 key;

如果对象里有函数,函数无法被拷贝下来

递归实现 JS 原生的方法不能很好的实现深复制,那么我们就动手实现一个。

思想非常简单:对于简单类型,直接复制。对于引用类型,递归复制它的每一个属性。

我们需要解决的问题:

  • 循环引用

  • 相同引用

解决循环引用问题

考虑 WeakMap

但是 WeakMap 比 Map 有两个不同:

1、【特殊点】WeakMap 只接受引用类型(对象)作为键名; 2、【优点】WeakMap 的键名所指向的对象都是弱引用,不计入垃圾回收机制,不用考虑内存泄漏。 当引用对象被清除,其所对应的 WeakMap 记录就会自动被移除。

实现 一个浅克隆

const shallClone = (target) => {
  if (typeof target === "object" && target !== null) {
    const cloneTarget = Array.isArray(target) ? [] : {};
    for (let prop in target) {
      if (target.hasOwnProperty(prop)) {
        // 遍历对象自身可枚举属性(不考虑继承属性和原型对象)
        cloneTarget[prop] = target[prop];
      }
    }
    return cloneTarget;
  } else {
    return target;
  }
};

实现一个 深克隆

/**
 * 深克隆(深拷贝)+ 解决深拷贝函数中循环引用时导致的栈溢出的问题
 * @param {object} origin
 * @param {*} hashMap WeakMap数据,用于缓存克隆过的对象
 * @returns origin / 克隆的origin
 */
function deepCloneCycle(origin, hashMap = new WeakMap()) {
  let result = null;
  if (hashMap.has(origin)) return hashMap.get(origin); // 查缓存字典中是否已有需要克隆的对象,有的话直接返回同一个对象(同一个引用,不用递归无限创建进而导致栈溢出了);
  // typeof null === 'object' true
  // typeof [] === 'object' true
  // typeof NaN === 'object' false
  if (typeof origin === "object" && origin !== null) {
    // 【类型判断】引用类型,进行递归拷贝(用typeof判断类型要剔除null的情况)
    if (Object.prototype.toString.call(origin) === "[object Array]") {
      // 【类型判断】数组类型,创建一个新数组
      result = [];
      hashMap.set(origin, result); // 哈希表缓存新值
      // 【遍历赋值】
      origin.forEach((el) => {
        result.push(deepCloneCycle(el, hashMap)); // 【递归】
      });
    } else if (Object.prototype.toString.call(origin) === "[object Object]") {
      // 【类型判断】对象类型,创建一个新对象
      result = {};
      hashMap.set(origin, result); // 哈希表缓存新值
      for (const key in origin) {
        // 【遍历赋值】对象这里特殊处理了,不遍历拷贝原型链上的属性
        if (origin.hasOwnProperty(key)) {
          result[key] = deepCloneCycle(origin[key], hashMap); // 【递归】
        }
      }
    }
  } else {
    // 【类型判断】原始类型直接返回
    return origin;
  }
  return result;
}

最后更新于

这有帮助吗?