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

【JavaScript深拷贝的几种方法】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 = https://www.it610.com/article/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; };