ES6中數組和對象的擴展運算符拷貝問題以及經常使用的深淺拷貝方法

 

　　在ES6中新增了擴展運算符能夠對數組和對象進行操做。有時候會遇到數組和對象的拷貝，可能會用到擴展運算符。那麼這個擴展運算符究竟是深拷貝仍是淺拷貝呢？

一.、使用擴展運算符拷貝

　　首先是下面的代碼。

let a = [1,2,3];
let b = [...a];
a == b // false

　　結果是false，這是很容易知道的，畢竟這個賦值操做符是有區別的。接下來將數組的值進行改變，又會怎樣呢；

let a = [1,2,3];
let b = [...a];
a[0] = 11;
console.log(a); // [ 11, 2, 3 ]
console.log(b); // [ 1, 2, 3 ]

　　發現a的值發生改變以後b的值並無發生改變。因此就是深拷貝了嗎？別急，接下來將數組中的元素設爲引用類型。

let a = [1,2,[1,2,3]];
let b = [...a];
a[2][1] = 11;
console.log(a); // [ 1, 2, [ 1, 11, 3 ] ]
console.log(b); // [ 1, 2, [ 1, 11, 3 ] ]

console.log(a[2] === b[2]); // true

　　此次的結果就有意思了，若是改變數組中的引用類型的元素中的值，此時a和b的值都會改變，而且a和b中的引用類型全等，也就是說地址是相同的。那麼爲何是這樣的呢？

二.、緣由

　　首先此分析僅爲本人目前的認知。

　　對於數組中的擴展運算符只是一個淺拷貝，僅對引用類型數據的第一層進行了拷貝，而假若再深的層次就不會進行拷貝。

　　另外對象的擴展運算符和數組是同樣的。

let a = {
    name : "Jyy",
    msg : {
        age : 29
    }
}
let b = {...a};
console.log(a == b);    // false
console.log(a.msg == b.msg);    // true;
a.msg = {
    age : "28"
}
console.log(a); // { name: 'Jyy', msg: { age: '28' } }
console.log(b); // { name: 'Jyy', msg: { age: 29 } }

a.msg.age = 28

console.log(a); // { name: 'Jyy', msg: { age: 28 } }
console.log(b); // { name: 'Jyy', msg: { age: 28 } }

 

 

 

 

　　在ES6中新增了擴展運算符能夠對數組和對象進行操做。有時候會遇到數組和對象的拷貝，可能會用到擴展運算符。那麼這個擴展運算符究竟是深拷貝仍是淺拷貝呢？

一.、使用擴展運算符拷貝

　　首先是下面的代碼。

let a = [1,2,3];
let b = [...a];
a == b // false

　　結果是false，這是很容易知道的，畢竟這個賦值操做符是有區別的。接下來將數組的值進行改變，又會怎樣呢；

let a = [1,2,3];
let b = [...a];
a[0] = 11;
console.log(a); // [ 11, 2, 3 ]
console.log(b); // [ 1, 2, 3 ]

　　發現a的值發生改變以後b的值並無發生改變。因此就是深拷貝了嗎？別急，接下來將數組中的元素設爲引用類型。

let a = [1,2,[1,2,3]];
let b = [...a];
a[2][1] = 11;
console.log(a); // [ 1, 2, [ 1, 11, 3 ] ]
console.log(b); // [ 1, 2, [ 1, 11, 3 ] ]

console.log(a[2] === b[2]); // true

　　此次的結果就有意思了，若是改變數組中的引用類型的元素中的值，此時a和b的值都會改變，而且a和b中的引用類型全等，也就是說地址是相同的。那麼爲何是這樣的呢？

二.、緣由

　　首先此分析僅爲本人目前的認知。

　　對於數組中的擴展運算符只是一個淺拷貝，僅對引用類型數據的第一層進行了拷貝，而假若再深的層次就不會進行拷貝。

　　另外對象的擴展運算符和數組是同樣的。

let a = {
    name : "Jyy",
    msg : {
        age : 29
    }
}
let b = {...a};
console.log(a == b);    // false
console.log(a.msg == b.msg);    // true;
a.msg = {
    age : "28"
}
console.log(a); // { name: 'Jyy', msg: { age: '28' } }
console.log(b); // { name: 'Jyy', msg: { age: 29 } }

a.msg.age = 28

console.log(a); // { name: 'Jyy', msg: { age: 28 } }
console.log(b); // { name: 'Jyy', msg: { age: 28 } }