您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue淺拷貝和深拷貝如何實(shí)現(xiàn)的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
字符串(Sring)、布爾值(Boolean)和數(shù)字(Number)
數(shù)組(Array)和對(duì)象(Object)
  基本數(shù)據(jù)類型是存儲(chǔ)在棧內(nèi)存中。而引用類型存放的值是指向數(shù)據(jù)的引用,而不是數(shù)據(jù)本身,真實(shí)數(shù)據(jù)是存放在堆內(nèi)存里,具體見(jiàn)如下:
  淺拷貝是按位拷貝對(duì)象,它會(huì)創(chuàng)建一個(gè)新對(duì)象,這個(gè)對(duì)象有著原始對(duì)象屬性值的一份精確拷貝。如果屬性是基本類型,拷貝的就是基本類型的值;如果屬性是內(nèi)存地址(引用類型),拷貝的就是內(nèi)存地址 ,因此如果其中一個(gè)對(duì)象改變了這個(gè)地址,就會(huì)影響到另一個(gè)對(duì)象。即默認(rèn)拷貝構(gòu)造函數(shù)只是對(duì)對(duì)象進(jìn)行淺拷貝復(fù)制(逐個(gè)成員依次拷貝),即只復(fù)制對(duì)象空間而不復(fù)制資源。
  對(duì)于基本數(shù)據(jù)類型的成員對(duì)象,因?yàn)榛A(chǔ)數(shù)據(jù)類型是值傳遞的,所以是直接將屬性值賦值給新的對(duì)象?;A(chǔ)類型的拷貝,其中一個(gè)對(duì)象修改該值,不會(huì)影響另外一個(gè)。
var a = 10 var b = a b = 20 console.log("a",a) //10 console.log("b",b) //20
對(duì)于引用類型,比如數(shù)組或者類對(duì)象,因?yàn)橐妙愋褪且脗鬟f,所以淺拷貝只是把內(nèi)存地址賦值給了成員變量,它們指向了同一內(nèi)存空間。改變其中一個(gè),會(huì)對(duì)另外一個(gè)也產(chǎn)生影響
var obj = { a:"AAA" } var obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "BBB"} console.log("obj2",obj2) //{name: "BBB"}
  深拷貝,在拷貝引用類型成員變量時(shí),為引用類型的數(shù)據(jù)成員另辟了一個(gè)獨(dú)立的內(nèi)存空間,實(shí)現(xiàn)真正內(nèi)容上的拷貝。
  對(duì)于基本數(shù)據(jù)類型的成員對(duì)象,因?yàn)榛A(chǔ)數(shù)據(jù)類型是值傳遞的,所以是直接將屬性值賦值給新的對(duì)象?;A(chǔ)類型的拷貝,其中一個(gè)對(duì)象修改該值,不會(huì)影響另外一個(gè)(和淺拷貝一樣)。
  對(duì)于引用類型,比如數(shù)組或者類對(duì)象,深拷貝會(huì)新建一個(gè)對(duì)象空間,然后拷貝里面的內(nèi)容,所以它們指向了不同的內(nèi)存空間。改變其中一個(gè),不會(huì)對(duì)另外一個(gè)也產(chǎn)生影響。
var obj = { a:"AAA" } var obj2 = {} // 創(chuàng)建新的對(duì)象 obj2 = obj obj2.a = "BBB" console.log("obj",obj) //{name: "AAA"} console.log("obj2",obj2) //{name: "BBB"}
  單級(jí)結(jié)構(gòu)時(shí)深拷貝,多級(jí)結(jié)構(gòu)淺拷貝,Object.assign()對(duì)象是用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象,將返回目標(biāo)對(duì)象。
a)單級(jí)結(jié)構(gòu)(一級(jí)拷貝是深拷貝):
var obj = { a: 10, } var obj2 = Object.assign({}, obj); obj2.a = 20 console.log("obj",obj); //{a: 10} console.log("obj2",obj2) //{a: 20}
b)多級(jí)結(jié)構(gòu)(一級(jí)拷貝是淺拷貝,修改二級(jí)對(duì)象還是會(huì)影響原對(duì)象):
var obj = { a: 10, b: { c:"AAA", d:666 } } var obj2 = Object.assign({}, obj); obj2.b.c = "BBB" console.log("obj",obj); //{a: 10,b: {c:"BBB",d:666}} console.log("obj2",obj2); //{a: 10,b: {c:"BBB",d:666}}
單級(jí)結(jié)構(gòu)時(shí)深拷貝,多級(jí)結(jié)構(gòu)淺拷貝
a)單級(jí)結(jié)構(gòu)(一級(jí)拷貝是深拷貝):
let arr = [1, 2]; let arr2 = arr.concat(); arr2[1] = 3; console.log("arr",arr) //[1, 2] console.log("arr2",arr2) //[1, 3]
b)多級(jí)結(jié)構(gòu)(一級(jí)拷貝是淺拷貝):
let arr = [1, 2, { a: 'AAA' }]; let arr2 = arr.concat(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]
單級(jí)結(jié)構(gòu)時(shí)深拷貝,多級(jí)結(jié)構(gòu)淺拷貝
a)單級(jí)結(jié)構(gòu)(一級(jí)拷貝是深拷貝):
let arr = [1, 2, 3]; let arr2 = arr.slice(); arr2[1] = 4; console.log("arr",arr) //[1, 2, 3] console.log("arr2",arr2) //[1, 4, 3]
b)多級(jí)結(jié)構(gòu)(一級(jí)拷貝是淺拷貝):
let arr = [1, 2, {a:'AAA'}]; let arr2 = arr.slice(); arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'BBB'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]
  用JSON.stringify將對(duì)象轉(zhuǎn)成JSON字符串,再用JSON.parse()把字符串解析成對(duì)象,一去一來(lái),新的對(duì)象產(chǎn)生了,而且對(duì)象會(huì)開(kāi)辟新的棧,實(shí)現(xiàn)深拷貝。
  單級(jí)多級(jí)均為深拷貝,但需要注意無(wú)法拷貝RegExp對(duì)象、function和symbol
let arr = [1, 2, {a:'AAA'}]; let arr2 = JSON.parse(JSON.stringify(arr)) arr2[2].a = 'BBB'; console.log("arr",arr) //[1, 2, {a: 'AAA'}] console.log("arr2",arr2) //[1, 2, {a: 'BBB'}]
單級(jí)多級(jí)均為深拷貝,使用lodash工具中cloneDeep方法實(shí)現(xiàn)深拷貝,需要通過(guò)npm引入lodash庫(kù)
npm i -save lodash //全局安裝
<script> import _ from 'lodash'; export default { name: 'Test', mounted() { const arr = [1, 2, { a: 'AAA' }]; const arr2 = _.cloneDeep(arr); arr2[2].a = 'BBB'; console.log('arr', arr); // [1, 2, {a: 'AAA'}] console.log('arr2', arr2); // [1, 2, {a: 'BBB'}] }, }; </script>
以上就是“Vue淺拷貝和深拷貝如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。