有在使用react/redux的人都聽過immutable.js,不過就單純討論javascript的immutability,或者說是javascript的物件不變性,可以參考這個immutable js影片教學。影片雖短但清楚明瞭。
基本上javascript複製物件有兩種的方式:標準型(primitive type)以及參考型(reference type)。如果是javascript的基礎形態如string、integer、布林值等,直接複製是沒問題的:
|
|
這種方式就是所謂的primitive type,複製物件的值改變時,不會影響原來的物件。
但javascript的immutability特性並不好,特別是在Object類型上。我們知道Object型別包含物件與陣列,舉例來說:
|
|
以下程式說明在陣列或物件型別複製時,javascript都會使用參考型(reference type):
|
|
這就產生了不好的結果,因為我們沒有要修改a.name的值,但是卻因為b.name的變動連同a.name也一起改變了。這種情況也同樣發生在ruby上。解決的方式是建立一筆新的物件,而透過新的物件以套用的方式帶入相對應的值,例如:
|
|
至於陣列的部分,我們可以要考慮增加或刪除的情況,可以使用concat方法來增加、filter方法來刪除:
|
|
最後在影片中有秀了一段物件混合陣列的做法,即便使用Object.assign()仍有陣列要處理:
|
|
小結:物件的部分要特別小心,除了使用Object.assign(), concat, filter之外,map與reduce也能夠產生新的陣列。