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