前言

在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別。

一、數(shù)據(jù)類型

1.1.基本數(shù)據(jù)類型

字符串（Sring）、布爾值（Boolean）和數(shù)字（Number）

1.2.引用數(shù)據(jù)類型

數(shù)組（Array）和對(duì)象（Object）

1.3.區(qū)別

  基本數(shù)據(jù)類型是存儲(chǔ)在棧內(nèi)存中。而引用類型存放的值是指向數(shù)據(jù)的引用，而不是數(shù)據(jù)本身，真實(shí)數(shù)據(jù)是存放在堆內(nèi)存里，具體見如下：

二、淺拷貝

2.1.定義

  淺拷貝是按位拷貝對(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ù)制資源。

2.2.淺拷貝特點(diǎn)

  對(duì)于基本數(shù)據(jù)類型的成員對(duì)象，因?yàn)榛A(chǔ)數(shù)據(jù)類型是值傳遞的，所以是直接將屬性值賦值給新的對(duì)象。基礎(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"}

三、深拷貝

3.1.定義

  深拷貝，在拷貝引用類型成員變量時(shí)，為引用類型的數(shù)據(jù)成員另辟了一個(gè)獨(dú)立的內(nèi)存空間，實(shí)現(xiàn)真正內(nèi)容上的拷貝。

3.2.深拷貝特點(diǎn)

  對(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"}

四、拷貝實(shí)現(xiàn)方案

4.1.Object.assign()

  單級(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}}

4.2.concat()

單級(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'}]

4.3.slice()

單級(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'}]

4.4.JSON.parse(JSON.stringify())

  用JSON.stringify將對(duì)象轉(zhuǎn)成JSON字符串，再用JSON.parse()把字符串解析成對(duì)象，一去一來，新的對(duì)象產(chǎn)生了，而且對(duì)象會(huì)開辟新的棧，實(shí)現(xiàn)深拷貝。
  單級(jí)多級(jí)均為深拷貝，但需要注意無法拷貝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'}]

4.5.cloneDeep()

單級(jí)多級(jí)均為深拷貝，使用lodash工具中cloneDeep方法實(shí)現(xiàn)深拷貝，需要通過npm引入lodash庫
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>

五、結(jié)論

到此這篇關(guān)于Vue淺拷貝和深拷貝實(shí)現(xiàn)方案的文章就介紹到這了,更多相關(guān)vue淺拷貝和深拷貝區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論