今天在看React-native性能優化的時候，看到如何避免shouldComponentUpdate的異常數據時，腦內一陣風暴，從而牽連出一連串的問題，于是有了這一篇關于js數組的復制（深淺拷貝）與賦值等為何能產生異常數據的文章。

有什么問題歡迎指正

?

現在進入正題：

首先異常數據的產生在于我們在復制賦值時，會有或沒有改變到本身的值。

?

一、push與concat

?

push的定義是:像數組末尾添加一個或更多元素，并返回新的長度。該方法會改變數組的長度。

concat的定義是：連接兩個或更多的數組，并返回結果，該方法不會改變現有數組，而僅僅會返回數組的一個副本。

var a = [1,2]; a.push([3,4]); a.concat(5); //a為1 2 3,4 5

?

二、深拷貝與淺拷貝

1.淺拷貝

JavaScript存儲對象都是存地址的，所以淺復制會導致 a 和 b 指向同一塊內存地址

數組的賦值其實相當于給了索引，改變其中一個變量其他引用都會改變

var a = [1,2,3]; var b = a; b[0] = 4; //a為4 2 3 //b為4 2 3

根據上面存儲對象的問題，這里就可以解決另一個問題：

? ??原始參數（比如一個具體的數字）被作為值傳遞給函數；值被傳遞給函數，如果被調用函數改變了這個參數的值，這樣的改變不會影響到全局或調用函數。

? ? 你傳遞一個對象（在js里數組不是簡單數據類型，而是對象）到一個函數，如果在函數里面改變了這個參數的內容，在外部這個變化是可見的。

?

2.深拷貝

?

（1）slice 函數

（2）concat 函數

（3）assgin

?

三個函數的原理都是返回數組的一個副本（相當于另外開辟內存空間），所以并不會改變數組本身的的值

?

但是這里有一點不同，就是assgin與其他兩點的不同

雖然說assgin也是深拷貝，但是他只是第一層深拷貝，第二層之后還是進行淺拷貝，例子如下：

var a = { a1:{ aa1:'11', aa2:'22' } } var b = Object.assgin({},a); var c = Object.assgin({},a); b.a1.aa1 = 33; /* b:{ a1:{ aa1:'33', aa2:'22' } } c:{ a1:{ aa1:'33', aa2:'22' } } */

轉載于:https://www.cnblogs.com/ZpandaZ/p/7396974.html

總結

以上是生活随笔為你收集整理的js数组的拷贝赋值复制二三事总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。