关于javascript:JavaScript深拷贝的几种方法

浅拷贝与深拷贝

浅拷贝 是创立一个新对象，这个对象有着原始对象属性值的拷贝。如果属性是根本类型，拷贝的就是根本类型的值，如果属性是援用类型，拷贝的是内存地址。如果不进行深拷贝，其中一个对象扭转了对象的值，就会影响到另一个对象的值。
深拷贝 是将一个对象从内存中残缺的拷贝一份进去, 从堆内存中开拓一个新的区域寄存新对象, 且批改新对象不会影响原对象。

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}

1.1 JSON.parse(JSON.stringify(obj))深浅拷贝的缺点

let a = {
    name: 'Jack',
    age: 18,
    hobbit: ['sing', {type: 'sports', value: 'run'}],
    score: {math: 'A',},
    run: function() {},
    walk: undefined,
    fly: NaN,
    cy: null,
    date: new Date()}
let b = JSON.parse(JSON.stringify(a))
console.log(b)
// {
//     age: 18,
//     cy: null,
//     date: "2022-05-15T08:04:06.808Z"
//     fly: null,
//     hobbit: (3) ["dance", "sing", {…}],
//     name: "Jack",
//     score: {math: "A"},
// }

取不到值为 undefined 的 key；如果对象里有函数，函数无奈被拷贝下来；无奈拷贝 copyObj 对象原型链上的属性和办法；对象转变为 date 字符串。

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;
}

2.1 解决循环援用和 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;
}

3. 兼容多种数据类型

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}
}

4.jQuery.extend()办法

能够应用 $.extend 进行深拷贝
$.extend(deepCopy, target, object1, [objectN])// 第一个参数为 true, 就是深拷贝

let a = {
    a: 1,
    b: {d:8},
    c: [1, 2, 3]
};
let b = $.extend(true, {}, a);
console.log(a.b.d === b.b.d); // false

4.1 jQuery.extend 源码

jQuery.extend = jQuery.fn.extend = function() {
  var options,
    name,
    src,
    copy,
    copyIsArray,
    clone,
    target = arguments[0] || {},
    i = 1,
    length = arguments.length,
    deep = false;

  // Handle a deep copy situation
  if (typeof target === "boolean") {
    deep = target;

    // Skip the boolean and the target
    target = arguments[i] || {};
    i++;
  }

  // Handle case when target is a string or something (possible in deep copy)
  if (typeof target !== "object" && !jQuery.isFunction(target)) {target = {};
  }

  // Extend jQuery itself if only one argument is passed
  if (i === length) {
    target = this;
    i--;
  }

  for (; i < length; i++) {
    // Only deal with non-null/undefined values
    if ((options = arguments[i]) != null) {
      // Extend the base object
      for (name in options) {src = target[name];
        copy = options[name];

        // Prevent never-ending loop
        if (target === copy) {continue;}

        // Recurse if we're merging plain objects or arrays
        if (
          deep &&
          copy &&
          (jQuery.isPlainObject(copy) || (copyIsArray = Array.isArray(copy)))
        ) {if (copyIsArray) {
            copyIsArray = false;
            clone = src && Array.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}

          // Never move original objects, clone them
          target[name] = jQuery.extend(deep, clone, copy);

          // Don't bring in undefined values
        } else if (copy !== undefined) {target[name] = copy;
        }
      }
    }
  }
  // Return the modified object
  return target;
};