JavaScript中的不變性意味着什麼？有什麼解決辦法？

本文涉及到對assign與擴充運算操作符（...）的使用

在編碼中，我們編寫的代碼一直在改變變量的值。這是

可變性

。但是

可變性

常常會導緻意外的錯誤。如果代碼隻處理原始資料類型（numbers, strings, booleans），那麼你不用擔心。但是，如果在處理Arrays和Objects時，則需要小心執行可變操作。

接下來示範

不變性

：

• 建立一個數組，并将其指派給另一個變量。

let a = [1, 2, 3]
let b = a
b.push(8)
consol.elog(b)
[1, 2, 3, 8]
consol.elog(a)
[1, 2, 3, 8]
           

可以看到，更新數組b也會同時改變數組a。這是因為對象和數組是引用資料類型 → 這意味着這樣的資料類型實際上并不儲存值，而是存儲指向存儲單元的指針。

将a指派給b，其實我們隻是建立了第二個指向同一存儲單元的指針。要解決這個問題，我們需要将引用的值複制到一個新的存儲單元。本文将使用ES6方法。

a = [1,2,3];
b = Object.assign([],a)
console.log(b)
[ 1, 2, 3 ]
b.push(8)
console.log(b)
[ 1, 2, 3, 8 ] // b output
console.log(a)
[ 1, 2, 3 ] // a output
           

在上面的代碼中，修改數組b将不會影響數組a。我們使用

Object.assign()

建立了一個新的副本，由數組b指向。我們也可以使用

操作符(...)

執行不可變操作：

a = [1,2,3]
console.log(a)
[ 1, 2, 3 ]
b = [...a, 4, 5, 6]
console.log(b)
[ 1, 2, 3, 4, 5, 6 ]
console.log(a)
[ 1, 2, 3 ]