JS實(shí)現(xiàn)深拷貝的4種方式介紹
概念
深拷貝：在堆內(nèi)存中重新開辟一個存儲空間，完全克隆一個一模一樣的對象；
淺拷貝：不在堆內(nèi)存中重新開辟空間，只復(fù)制棧內(nèi)存中的引用地址。
本質(zhì)上兩個對象（數(shù)組）依然指向同一塊存儲空間在這里插入代碼片
1、遞歸方式（推薦，項(xiàng)目中最安全最常用）
//使用遞歸的方式實(shí)現(xiàn)數(shù)組、對象的深拷貝
export function deepClone (obj) {
let objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//判斷ojb子元素是否為對象，如果是，遞歸復(fù)制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是，簡單復(fù)制
objClone[key] = obj[key];
}
}
}
}
return objClone;
}; 2、JSON.stringify() ；(這個不推薦使用，有坑)
普通的對象也可以進(jìn)行深拷貝，但是！??！當(dāng)對象內(nèi)容項(xiàng)為number,string.boolean的時候，是沒有什么問題的。但是，如果對象內(nèi)容項(xiàng)為undefined,null,Date,RegExp,function，error的時候。使用JSON.parse(JSON.stringify())進(jìn)行拷貝就會出問題了。
3、使用第三方庫lodash中的cloneDeep()方法
是否推薦使用，看情況吧。如果我們的項(xiàng)目中只需要一個深拷貝的功能，這種情況下為了一個功能引入整個第三方庫就顯得很不值得了。不如寫一個遞歸函數(shù)對于項(xiàng)目來說性能更好
實(shí)際上，lodash.cloneDeep()方法底層使用的本來就是遞歸方法。只是在外層又封裝了一層cloneDeep的主體函數(shù)baseClone。
所以，如果不是原先項(xiàng)目中有使用 lodash 這個庫的話，大可不必為了這一個功能而去引入它。
4、jquery的extend()方法進(jìn)行深拷貝（推薦在JQ中使用）
這個方法僅適用于JQuery構(gòu)建的項(xiàng)目。JQuery自身攜帶的extend
let obj = { a: { c: 2, d: [1, 3, 5], e: "哇哇哇" }, b: 4 };
let newObj = $.extend(true, {}, obj1);
//拷貝完成obj.b = 20;console.log(newObj.b); //輸出 4總結(jié)：
進(jìn)行深拷貝的方法：
遞歸函數(shù) （推薦使用，項(xiàng)目中使用的更多，更小，更安全）
JSON.stringify() 和JSON.parse() ; (不推薦使用,如果遇到Function,Date等類型的變量容易出現(xiàn)一些意料之外的問題)
第三方庫lodash的cloneDeep()方法
JQuery的extend()函數(shù) (推薦在JQuery項(xiàng)目中使用，其他項(xiàng)目依然推薦是用遞歸函數(shù))
到此這篇關(guān)于JS實(shí)現(xiàn)深拷貝的4種方式的文章就介紹到這了,更多相關(guān)JS深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript簡單鏈?zhǔn)秸{(diào)用案例分析
這篇文章主要介紹了javascript簡單鏈?zhǔn)秸{(diào)用,結(jié)合具體實(shí)例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頁面浮動導(dǎo)航，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
uniapp使用navigateBack方法返回上級頁面并刷新的簡單示例
最近寫uniapp項(xiàng)目的時候發(fā)現(xiàn)有時候需要更新頁面數(shù)據(jù),所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用navigateBack方法返回上級頁面并刷新的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
JavaScript中隨機(jī)數(shù)方法?Math.random()
這篇文章主要介紹了JavaScript中隨機(jī)數(shù)方法?Math.random()，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
js面向?qū)ο缶幊讨绾螌?shí)現(xiàn)方法重載
如何實(shí)現(xiàn)方法重載，涉及到三個問題：同名函數(shù)的調(diào)用、函數(shù)中特殊的參數(shù)arguments、如何利用arguments實(shí)現(xiàn)方法重載,需要的朋友可以參考下2014-07-07
JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
JavaScript最全公共方法匯總并解析（前端開發(fā)收藏必備）
JavaScript掌握各種常用的公共方法更是提升開發(fā)效率和代碼質(zhì)量的關(guān)鍵,無論你是初學(xué)者還是資深開發(fā)者,了解并熟練運(yùn)用這些方法都能讓你的代碼更加簡潔、高效,本篇博客將為你詳細(xì)匯總并解析最全的JavaScript公共方法,涵蓋數(shù)組、對象、字符串、日期等各個方面的常用技巧2024-06-06
JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS數(shù)組去掉重復(fù)數(shù)據(jù)只保留一條的實(shí)現(xiàn)代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了原生JS實(shí)現(xiàn)的自動輪播圖功能,結(jié)合實(shí)例形式詳細(xì)分析了基于原生js實(shí)現(xiàn)輪播圖的原理、操作步驟及操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
JSON一種簡單的數(shù)據(jù)格式，比xml更輕巧，在JavaScript中處理JSON數(shù)據(jù)不需要任何特殊的API或工具包，下面為大家詳細(xì)介紹下js中的json對象2014-10-10