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; };
「其他文章」
- 為什麼一定要從DevOps走向BizDevOps?
- Vue3響應式原始碼分析 - ref ReactiveEffect篇
- 2022 年程式語言趨勢:Swift、Kotlin 熱度持續增長,收入最高的 5 種語言竟是它們
- 雲音樂FeatureStore建設與實踐
- Vue專案之使用EditorConfig, Eslint和Prettier實現程式碼規範
- 如何使用 DataAnt 監控 Apache APISIX
- 基於 Nebula Graph 構建百億關係知識圖譜實踐
- 元宇宙 3D 開荒場 - 探味奇遇記
- 摺疊面板元件的設計與實現
- web技術分享| 【高德地圖】實現自定義的軌跡回放
- Vue3中的teleport節點傳送
- Flutter 常見異常分析
- React Native如何做線上錯誤與效能監控
- shell指令碼程式設計學習筆記——變數
- Object.prototype.toString.call()的原理
- 玩轉 AbortController 控制器
- Go十大常見錯誤第2篇:benchmark效能測試的坑
- 技術分享 | dbslower 工具學習之探針使用
- TypeScript 中令人迷惑的物件型別:Object、{}和 object
- 探針技術-JavaAgent 和位元組碼增強技術-Byte Buddy