大家好缸濒,我是IT修真院北京分院第22期學(xué)員足丢,一枚正直善良的web程序員。
1.背景介紹
在使用JavaScript對(duì)數(shù)組進(jìn)行操作的時(shí)候庇配,我們經(jīng)常需要將數(shù)組進(jìn)行備份斩跌,也就是復(fù)制、克隆或者說做拷貝捞慌,哎呀耀鸦,怎樣叫隨你啦
要弄明白拷貝,首先要明白js中對(duì)象的組成啸澡。在js中一切實(shí)例皆是對(duì)象袖订,具體分為原始類型和合成類型。原始類型對(duì)象指的是number嗅虏、string洛姑、boolean等,合成類型對(duì)象指的是array皮服、object以及function吏口。 數(shù)組的拷貝有深有淺,下面具體分析冰更!
2.知識(shí)剖析
淺拷貝
淺拷貝可以理解為就是復(fù)制一份來引用,所有引用對(duì)象都指向一份數(shù)據(jù)昂勒,并且都可以修改這份數(shù)據(jù)蜀细。 對(duì)于字符串類型,淺拷貝是對(duì)值的拷貝戈盈,對(duì)于對(duì)象來說奠衔,淺拷貝是對(duì)對(duì)象地址的拷貝,也就是復(fù)制 的結(jié)果是兩個(gè)對(duì)象指向同一個(gè)內(nèi)存地址塘娶,修改其中一個(gè)對(duì)象的屬性归斤,則另一個(gè)對(duì)象的屬性也會(huì)改變
深拷貝
深拷貝則是復(fù)制變量值,對(duì)于非基本類型的變量刁岸,則遞歸至基本類型變量后脏里,再復(fù)制抄淑。 深復(fù)制不同于淺復(fù)制缰盏,它會(huì)開辟新的內(nèi)存地址滑凉,兩個(gè)對(duì)象對(duì)應(yīng)兩個(gè)不同的地址吨凑,修改 一個(gè)對(duì)象的屬性,不會(huì)改變另一個(gè)對(duì)象的屬性
實(shí)現(xiàn)數(shù)組深拷貝有兩種方法矾踱!
3.常見問題
淺拷貝的缺點(diǎn)是如果你改變了對(duì)象B所指向的內(nèi)存地址恨狈,你同時(shí)也改變了對(duì)象A指向這個(gè)地址的字段。
深拷貝呛讲,這種方式會(huì)完全拷貝所有數(shù)據(jù)禾怠,優(yōu)點(diǎn)是B與A不會(huì)相互依賴(A,B完全脫離關(guān)聯(lián)), 缺點(diǎn)是拷貝的速度更慢贝搁,代價(jià)更大 (可理解為耗費(fèi)了更多內(nèi)存空間)
4.解決方案
這個(gè)就要看自己的用途了吗氏,視情況選擇
5.編碼實(shí)戰(zhàn)
slice方法
對(duì)于array對(duì)象的slice函數(shù),
返回一個(gè)數(shù)組的一段徘公。(仍為數(shù)組)
arrayObj.slice(start, [end])
參數(shù):
arrayObj
必選項(xiàng)牲证。一個(gè) Array 對(duì)象。
start
必選項(xiàng)关面。arrayObj 中所指定的部分的開始元素是從零開始計(jì)算的下標(biāo)坦袍。
end
可選項(xiàng)。arrayObj 中所指定的部分的結(jié)束元素是從零開始計(jì)算的下標(biāo)等太。
vararr= ["One","Two","Three"];vararrtoo= arr.slice(0);? ? ? ? ? ? ? ? arrtoo[1] ="set Map";? ? ? ? ? ? ? ? console.log(arr);//One,Two,Threeconsole.log(arrtoo);//One,set Map,Three
concat方法
concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組捂齐。
該方法不會(huì)改變現(xiàn)有的數(shù)組,而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本缩抡。
語法
arrayObject.concat(arrayX,arrayX,......,arrayX)
說明
返回一個(gè)新的數(shù)組奠宜。該數(shù)組是通過把所有 arrayX 參數(shù)添加到 arrayObject 中生成的。如果要進(jìn)行 concat() 操作的參數(shù)是數(shù)組瞻想,那么添加的是數(shù)組中的元素压真,而不是數(shù)組。
vararr1= ["One","Two","Three"];vararrtooo= arr1.concat();? ? ? ? ? ? ? ? arrtooo[1] ="set Map To";? ? ? ? ? ? ? ? console.log(arr1);//One,Two,Threeconsole.log(arrtooo);//One,set Map To,Three
6.擴(kuò)展思考
對(duì)象類型的深淺拷貝蘑险,這個(gè)以前沒用過滴肿,真心沒怎么理解,放個(gè)鏈接以示誠意
腳本之家上的js對(duì)象淺拷貝和深拷貝詳解http://www.jb51.net/article/91906.htm
7.參考文獻(xiàn)
參考一:數(shù)組的拷貝
參考一:原始數(shù)據(jù)類型和對(duì)象類型的區(qū)別及深度拷貝解析
8.更多討論
鏈接: https://ptteng.github.io/PPT/PPT/selffunction.html
視頻鏈接:鏈接: https://pan.baidu.com/s/1nvT3dUh 密碼: j467
今天的分享就到這里啦佃迄,歡迎大家點(diǎn)贊泼差、轉(zhuǎn)發(fā)、留言呵俏、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師堆缘,現(xiàn)在開始,找個(gè)師兄普碎,帶你入門吼肥,掌控自己學(xué)習(xí)的節(jié)奏,學(xué)習(xí)的路上不再迷茫”潜沦。
這里是技能樹.IT修真院萄涯,成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線,學(xué)習(xí)透明化唆鸡,成長可見化涝影,師兄1對(duì)1免費(fèi)指導(dǎo)≌迹快來與我一起學(xué)習(xí)吧?燃逻!