前言

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

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

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

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

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

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

1.3.區(qū)別

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

二、淺拷貝

2.1.定義

  淺拷貝是按位拷貝對象，它會創(chuàng)建一個新對象，這個對象有著原始對象屬性值的一份精確拷貝。如果屬性是基本類型，拷貝的就是基本類型的值；如果屬性是內(nèi)存地址（引用類型），拷貝的就是內(nèi)存地址 ，因此如果其中一個對象改變了這個地址，就會影響到另一個對象。即默認(rèn)拷貝構(gòu)造函數(shù)只是對對象進(jìn)行淺拷貝復(fù)制(逐個成員依次拷貝)，即只復(fù)制對象空間而不復(fù)制資源。

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

  對于基本數(shù)據(jù)類型的成員對象，因?yàn)榛A(chǔ)數(shù)據(jù)類型是值傳遞的，所以是直接將屬性值賦值給新的對象?；A(chǔ)類型的拷貝，其中一個對象修改該值，不會影響另外一個。

var a = 10
var b = a
b = 20
console.log("a",a) //10
console.log("b",b) //20

對于引用類型，比如數(shù)組或者類對象，因?yàn)橐妙愋褪且脗鬟f，所以淺拷貝只是把內(nèi)存地址賦值給了成員變量，它們指向了同一內(nèi)存空間。改變其中一個，會對另外一個也產(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ù)據(jù)成員另辟了一個獨(dú)立的內(nèi)存空間，實(shí)現(xiàn)真正內(nèi)容上的拷貝。

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

  對于基本數(shù)據(jù)類型的成員對象，因?yàn)榛A(chǔ)數(shù)據(jù)類型是值傳遞的，所以是直接將屬性值賦值給新的對象?；A(chǔ)類型的拷貝，其中一個對象修改該值，不會影響另外一個（和淺拷貝一樣）。

  對于引用類型，比如數(shù)組或者類對象，深拷貝會新建一個對象空間，然后拷貝里面的內(nèi)容，所以它們指向了不同的內(nèi)存空間。改變其中一個，不會對另外一個也產(chǎn)生影響。

var obj = {
    a:"AAA"
}
var obj2 = {} // 創(chuàng)建新的對象
obj2 = obj
obj2.a = "BBB"
console.log("obj",obj) //{name: "AAA"}
console.log("obj2",obj2) //{name: "BBB"}

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

4.1.Object.assign()

  單級結(jié)構(gòu)時深拷貝，多級結(jié)構(gòu)淺拷貝，Object.assign()對象是用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標(biāo)對象，將返回目標(biāo)對象。
a）單級結(jié)構(gòu)（一級拷貝是深拷貝）：

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）多級結(jié)構(gòu)（一級拷貝是淺拷貝，修改二級對象還是會影響原對象）：

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()

單級結(jié)構(gòu)時深拷貝，多級結(jié)構(gòu)淺拷貝
a）單級結(jié)構(gòu)（一級拷貝是深拷貝）：

let arr = [1, 2];
let arr2 = arr.concat();
arr2[1] = 3;
console.log("arr",arr) //[1, 2]
console.log("arr2",arr2) //[1, 3]

b）多級結(jié)構(gòu)（一級拷貝是淺拷貝）：

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()

單級結(jié)構(gòu)時深拷貝，多級結(jié)構(gòu)淺拷貝
a）單級結(jié)構(gòu)（一級拷貝是深拷貝）：

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）多級結(jié)構(gòu)（一級拷貝是淺拷貝）：

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

單級多級均為深拷貝，使用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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論