js中區(qū)分深拷貝與淺拷貝的實(shí)戰(zhàn)過程
一、自我理解
簡單來講就是:深拷貝層層拷貝,淺拷貝只拷貝第一層。
在深拷貝中,新對象中的更改不會(huì)影響原對象,而在淺拷貝中,新對象中的更改,原對象中也會(huì)跟著改。
在深拷貝中,原對象與新對象不共享相同的屬性,而在淺拷貝中,它們具有相同的屬性。
舉個(gè)栗子:存在A和B兩個(gè)數(shù)據(jù),假設(shè)B復(fù)制了A,當(dāng)修改A時(shí),如果B跟著A變化了,則是淺拷貝;如果B不受A的改變而改變,則是深拷貝
let A = [0,1,2] let B = A console.log(A === B); A[0] = 3 console.log(A,B);
結(jié)果如下:
這就是一個(gè)簡單的淺拷貝例子,雖然B復(fù)制了A,但是修改了A,B卻跟著A變化了?
二、數(shù)據(jù)存儲(chǔ)形式
通過上述栗子,我們就需要了解數(shù)據(jù)類型的存儲(chǔ)方式了,如果還沒有了解數(shù)據(jù)類型的小伙伴歡迎閱讀 JS中8種數(shù)據(jù)類型
- 基本數(shù)據(jù)類型:number,string,boolean,null,undefined,symbol(es6),還有谷歌67版本中的BigInt(任意精度整數(shù))
- 引用數(shù)據(jù)類型:Object【Object是個(gè)大類,function函數(shù)、array數(shù)組、date日期...等都?xì)w屬于Object】
(1)基本數(shù)據(jù)類型存儲(chǔ)于棧中
變量名和值都存儲(chǔ)與棧中
每當(dāng)聲明一個(gè)變量,就會(huì)開辟一個(gè)新的內(nèi)存空間來存儲(chǔ)值,例如:let a = 1
// 聲明一個(gè)變量 let a = 1;
當(dāng)b復(fù)制了a后,因?yàn)閎也是一個(gè)變量,所以棧內(nèi)存會(huì)再開辟一個(gè)新的內(nèi)存空間:
// 聲明一個(gè)變量 let a = 1; let b = a; //b變量復(fù)制a變量 console.log(a,b); //1 1
這就一目了然了,a和b兩個(gè)變量歸屬于不同的內(nèi)存空間,所以當(dāng)你修改其中一個(gè)值,另外一個(gè)值不會(huì)受其影響!
// 聲明一個(gè)變量 let a = 1; let b = a; //b變量復(fù)制a變量 console.log(a,b); //1 1 // 修改a的值不影響b a = 123; console.log(a,b); //123 1
(2)引用數(shù)據(jù)類型存儲(chǔ)與堆中
變量名存儲(chǔ)在棧中,值存在于堆中,這時(shí)棧內(nèi)存中會(huì)提供一個(gè)指針用于指向堆內(nèi)存中的值
當(dāng)我們聲明一個(gè)引用數(shù)據(jù)類型時(shí),會(huì)提供一個(gè)指針指向堆內(nèi)存中的值:
// 聲明一個(gè)引用類型的值 let a = [0,1,2,3,4]
當(dāng)b復(fù)制了a后,只是復(fù)制了當(dāng)前棧內(nèi)存中提供的指針,指向同一個(gè)堆內(nèi)存中的值,并不是復(fù)制了堆內(nèi)存中的值:
let a = [0,1,2,3,4] let b = a //復(fù)制的是一個(gè)指針,而不是堆中的值
所以當(dāng)我們進(jìn)行a[0]=1時(shí),導(dǎo)致指針?biāo)赶虻亩褍?nèi)存中的值發(fā)生了改變,而a和b是同一個(gè)指針,指向同一個(gè)堆內(nèi)存地址,所以b的值也會(huì)受影響,這就是淺拷貝!
// 聲明一個(gè)引用類型的值 let a = [0,1,2,3,4]; let b = a; //復(fù)制的是一個(gè)指針,而不是堆中的值 console.log(a === b); a[0] = 1; //改變a數(shù)組值,b數(shù)組跟著改變(淺拷貝) console.log(a,b);
所以,我們需要在堆內(nèi)存中新開辟一個(gè)內(nèi)存專門接收存儲(chǔ)b的值,道理與基本數(shù)據(jù)類型一樣,這樣就可以實(shí)現(xiàn)深拷貝(修改一個(gè)值不會(huì)影響另一個(gè)值的變化):
三、怎樣實(shí)現(xiàn)深拷貝?
(1)借助JSON對象的parse和stringify
parse()方法用于將一個(gè)字符串解析為json對象
stringify()方法用于將一個(gè)對象解析為字符串
// 淺拷貝 let arr = [1,"hello",{name:"張三",age:21}] let copyArr = arr console.log(arr === copyArr); //true arr[1] = "您好" console.log("淺拷貝",arr, copyArr);
// JSON對象方法實(shí)現(xiàn)深拷貝 let arr = [1,"hello",{name:"張三",age:21}] let newArr = JSON.parse(JSON.stringify(arr)) //將arr數(shù)組轉(zhuǎn)換為字符串,再作為參數(shù)轉(zhuǎn)化為對象 arr[1] = "您好" arr[2].name = "法外狂徒" console.log("深拷貝",arr, newArr);
原理是利用JSON.stringify將對象轉(zhuǎn)成JSON字符串,再用JSON.parse把字符串解析成對象,這樣在堆中開辟了新的內(nèi)存,實(shí)現(xiàn)深拷貝
這種寫法非常簡單,而且可以應(yīng)對大部分的應(yīng)用場景,但是它還是有很大缺陷的,比如拷貝其他引用類型、拷貝函數(shù)、循環(huán)引用等情況
(2)手寫遞歸
遞歸方法實(shí)現(xiàn)深度克隆原理:遍歷對象、數(shù)組...直到里邊都是基本數(shù)據(jù)類型,然后再去復(fù)制,就是深度拷貝
- 如果是原始類型,無需繼續(xù)拷貝,直接返回
- 如果是引用類型,創(chuàng)建一個(gè)新的對象,遍歷需要克隆的對象,將需要克隆對象的屬性執(zhí)行深拷貝后依次添加到新對象上
// 手寫遞歸實(shí)現(xiàn)深拷貝 function clone(target) { if (typeof target === 'object') { // 創(chuàng)建一個(gè)新對象 let cloneTarget = {}; // 遍歷需要克隆的對象 for (const key in target) { // 將需要克隆對象的屬性執(zhí)行深拷貝后依次添加到新對象上 cloneTarget[key] = clone(target[key]); } // 返回克隆對象 return cloneTarget; } else { return target; } }; // 模擬拷貝對象 const person = { name: "李小白", age: 18, job: { name:"web前端", salary:"15k", address:"成都" } }; // 將需要克隆的對象傳遞給clone函數(shù)作為參數(shù),接收一個(gè)克隆對象作為返回結(jié)果 let newTarget = clone(person) //修改原對象屬性 person["name"] = "李大白" person["job"]["salary"] = "25k" console.log(person,newTarget); //實(shí)現(xiàn)深拷貝
利用遞歸可以實(shí)現(xiàn)深度拷貝,但是有局限性,例如數(shù)組還沒考慮進(jìn)去!
想要兼容數(shù)組其實(shí)很簡單,直接判斷一下參數(shù)是不是數(shù)組,然后利用三木運(yùn)算決定是創(chuàng)建一個(gè)新對象還是一個(gè)新數(shù)組:
function clone(target) { if (typeof target === 'object') { let isArr = Array.isArray(target) // 判斷傳入的參數(shù)是數(shù)組嗎 ? 是則賦值[] : 否則賦值{} let cloneTarget = isArr ? [] : {}; // 遍歷需要克隆的對象 for (const key in target) { // 將需要克隆對象的屬性執(zhí)行深拷貝后依次添加到新對象上 cloneTarget[key] = clone(target[key]); } // 返回克隆對象 return cloneTarget; } else { return target; } };
(3)JQuery中extend方法
在jQuery中提供一個(gè)$extend()來實(shí)現(xiàn)深拷貝
語法:
$.extend( [deep ], target, object1 [, objectN ] )
- deep 表示是否深拷貝,為true為深拷貝,為false,則為淺拷貝
- target Object類型 目標(biāo)對象,其他對象的成員屬性將被附加到該對象上。
- object1 objectN可選。 Object類型 第一個(gè)以及第N個(gè)被合并的對象。
let arr = ["李小白",18,["前端","15k"],21] // true:開啟深拷貝,目標(biāo)對象:[],原對象:arr let cloneArr = $.extend(true, [], arr) arr[0] = "李大白"; arr[2][0] = "java"; console.log(arr, cloneArr);
$extend()第一個(gè)參數(shù)為true時(shí)可以實(shí)現(xiàn)深拷貝!但是第一個(gè)參數(shù)為false,則只會(huì)拷貝第一層屬性,不能實(shí)現(xiàn)深拷貝:
let arr = ["李小白",18,["前端","15k"],21] // false:不開啟深拷貝,目標(biāo)對象:[],原對象:arr let cloneArr = $.extend(false, [], arr) arr[0] = "李大白"; arr[2][0] = "java"; console.log(arr, cloneArr);
總結(jié)/注意
實(shí)現(xiàn)深拷貝方式有多種,以上三種較為常用,另外還有一個(gè):函數(shù)庫lodash中_.cloneDeep方法(本人未使用過)也可以實(shí)現(xiàn)深拷貝。
最后需要補(bǔ)充一下,網(wǎng)上有很多人說slice和concat方法可以實(shí)現(xiàn),但我要說的是slice和concat方法不能實(shí)現(xiàn)深拷貝的?。。?/p>
下面舉例說明:
// slice() let arr = [0,1,["hello","world"]]; let cloneArr = arr.slice(); arr[0] = "零"; arr[2][0] = "hello2022" console.log(arr,cloneArr);
// concat() let arr = [0,1,["hello","world"]]; let cloneArr = arr.concat(); arr[0] = "零"; arr[2][0] = "hello2022" console.log(arr,cloneArr);
這兩個(gè)方法得到的結(jié)果都是一樣的:
這一點(diǎn)大家一定要注意,深拷貝必須要拷貝所有層級的屬性,而這兩個(gè)方法拷貝不徹底,也就是只能拷貝第一層,希望大家不要踩坑!
總結(jié)
到此這篇關(guān)于js中區(qū)分深拷貝與淺拷貝的文章就介紹到這了,更多相關(guān)js區(qū)分深拷貝與淺拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS數(shù)組實(shí)現(xiàn)分類統(tǒng)計(jì)實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了js數(shù)組實(shí)現(xiàn)分類統(tǒng)計(jì)的相關(guān)知識(shí),非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09JavaScript學(xué)習(xí)筆記之獲取當(dāng)前目錄的實(shí)現(xiàn)代碼
用來獲取當(dāng)前目錄的js代碼,需要的朋友可以參考下,主要利用了split函數(shù)。2010-12-12Ajax跨域?qū)崿F(xiàn)代碼(后臺(tái)jsp)
這篇文章主要介紹了Ajax跨域?qū)崿F(xiàn)代碼(后臺(tái)jsp),需要的朋友可以參考下2017-01-01JavaScript實(shí)現(xiàn)刪除數(shù)組重復(fù)元素的5種常用高效算法總結(jié)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)刪除數(shù)組重復(fù)元素的5種常用高效算法,結(jié)合實(shí)例形式總結(jié)分析了javascript刪除數(shù)組重復(fù)元素的幾種常見操作技巧,需要的朋友可以參考下2018-01-01Webwork 實(shí)現(xiàn)文件上傳下載代碼詳解
WebWork 當(dāng)然也提供了很友好的攔截器來實(shí)現(xiàn)對文件的上傳,讓我們可以專注與業(yè)務(wù)邏輯的設(shè)計(jì)和實(shí)現(xiàn),在實(shí)現(xiàn)上傳和下載時(shí)順便關(guān)注了下框架上傳下載的實(shí)現(xiàn)2016-02-02JavaScript 驗(yàn)證瀏覽器是否支持javascript的方法小結(jié)
一些網(wǎng)站只有客戶端js的驗(yàn)證,這樣就給一些hacher一些可趁之機(jī)了,不信大家測試一些網(wǎng)站的注冊功能看看,有部分網(wǎng)站只有客戶端驗(yàn)證,我為了達(dá)到客戶端驗(yàn)證,先是判斷瀏覽器是否支持js,如果不支持,提示信息,然后屏蔽掉發(fā)送按鈕2009-05-05