浅拷贝与深拷贝

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

1.JSON.parse(JSON.stringify(obj))

个别状况下对一般对象须要进行深拷贝，能够应用这种办法进行深拷贝操作，这种是最简略且代码量起码的深拷贝办法。

let a = {a:1,b:2}let b = JSON.parse(JSON.stringify(a))a.a = 11console.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;};