Immutable Data是指一旦被創造后，就不可以被改變的數據。通過使用Immutable Data，可以讓我們更容易的去處理緩存、回退、數據變化檢測等問題，簡化我們的開發
Mutable 對象
在 JavaScript 中，對象是引用類型的數據，其優點在于頻繁的修改對象時都是在原對象的基礎上修改，并不需要重新創建，這樣可以有效的利用內存，不會造成內存空間的浪費，對象的這種特性可以稱之為 Mutable，中文的字面意思是「可變」。
對于 Mutable 的對象，其靈活多變的優點有時可能會成為其缺點，越是靈活多變的數據越是不好控制，對于一個復雜結構的對象來說，一不小心就在某個不經意間修改了數據，假如該對象又在多個作用域中用到，此時很難預見到數據是否改變以及何時改變的。
var obj = { /* 一個復雜結構的對象 */ };
doSomething(obj);
// 上面的函數之行完后，此時的 obj 還是最初的那個 obj 嗎？
針對這種問題，常規的解決辦法可以通過將對象進行深拷貝的形式復制出一個新的對象，再在新對象上做修改的操作，這樣能確保數據的可控性，但是頻繁的復制會造成內存空間的大量浪費。
var obj = { /* 一個復雜結構的對象 */ };
// copy 出一個新的 obj2
// 但是 copy 操作會浪費內存空間
var obj2 = deepClone(obj);
doSomething(obj2);
// 上面的函數之行完后，無論 obj2 是否變化，obj 肯定還是原來那個 obj
Immutable 對象
為了能更好的解決上述的問題，出現了 Immutable 對象，Immutable 從字面上翻譯成中文是「不可變」。每次修改一個 Immutable 對象時都會創建一個新的不可變的對象，在新對象上操作并不會影響到原對象的數據。這種特殊的對象并不是 JavaScript 新出的功能特性，而是業界為了解決這種問題提供的一套解決方案，并且涌現出了一些優秀的開源類庫，其中最有名的就是 Facebook 的 Lee Byron 開源的 immutable.js。當然，Immutable 的這種解決方案并不是獨創的，而是來源于 Clojure 和 Scala。
Mutable 和 Immutable 的性能對比
對于 Mutable 的對象的低效率操作主要體現在復制和比較上，而 Immutable 對象就是解決了這兩大低效的痛點。
普通的 Mutable 對象的深拷貝操作會將一整份數據都復制一遍，而 Immutable 對象在修改數據時并不會復制一整份數據，而是將變化的節點與未變化的節點的父子關系轉移到一個新節點上，類似于鏈表的結構。從 “復制” 的角度來看，做到了最小化的復制，未變化的部分都是共享的，Mutable 在復制的時候是 “全量”，而 Immutable 復制的是 “增量”，對于內存空間的使用率的比較高低立判。
并且基于每次修改一個 Immutable 對象都會創建一個新的 Immutable 對象的這種特性可以將數據的修改狀態保存成一組快照，這也是挺方便的。
再來說說比較操作。對于 Mutable 的對象，如果要比較兩個對象是否相等，必須遍歷對象的每個節點進行比較，對于結構復雜的對象來說，其效率肯定高不到哪去。對于 Immutable 對象，immutable.js 提供了直接判斷兩個 Immutable 對象的「值」是否相等的 API。
var map1 = Immutable.Map({a:1, b:1, c:1});
var map2 = Immutable.Map({a:1, b:1, c:1});
assert(map1 !== map2); // 不同的 Immutable 實例，此時比較的是引用地址
assert(Immutable.is(map1, map2)); // map1 和 map2 的值相等，比較的是值
assert(map1.equals(map2)); // 與 Immutable.is 的作用一樣
在實際的開發應用中，性能并不總是最關鍵和重要的，對于普通的 JavaScript 的項目來說，由于 Immutable 的特性帶來的數據的可控性比起性能來說更有優勢，對于 Mutable 對象適合在封閉的作用域小范圍使用，而 Immutable 對象適合數據需要跨多個作用域傳遞時使用。
Mutable 和 Immutable 在使用上的區別
immutable.js 提供了多種 Immutable 的數據結構：包含了 List Stack Map OrderedMap Set OrderedSet Record，這些數據結構與原生的 Mutable 的數據結構大致對應。
各數據結構的用法這里不細說，主要說說 Immutable 對象與 Mutable 對象在使用上的區別吧。
原生的 Mutable 對象在「讀」和「寫」上非常方便。
var mutableObj = {};
// 寫入數據
mutableObj.foo = 'bar';
// 讀取數據
console.log(mutableObj.foo);
而 Immutable 對象需要通過 set 和 get 來對數據進行「讀」和「寫」。
var immutableObj1 = Immutable.Map();
// 寫入數據
var immutableObj2 = immutableObj1.set('foo', 'bar');
// 讀取數據
console.log(immutableObj2.get('foo')); // => 'bar'
上面的例子為了說明 set 方法的使用才在一開始創建了一個空對象，實際上可以在實例化的時候傳初始值。
var immutableObj = Immutable.Map({'foo', 'bar'});
對于層級比較深的數據，immutable.js 提供的訪問接口很方便。
var immutableObj1 = Immutable.fromJS({
a: {
b: 'c'
},
d: [1, 2, 3]
});
// 讀取深層級的數據
console.log(immutableObj1.getIn(['a', 'b'])); // => 'c'
console.log(immutableObj1.getIn(['d', 1])); // => 2
// 修改深層級的數據
var immutableObj2 = immutableObj1.setIn(['a', 'b'], 'd');
console.log(immutableObj2.getIn(['a', 'b'])); // => 'd'
如果是原生的 Mutable 對象，在鏈式訪問一個深層級的數據時可能會報對象 undefined 的錯誤，而 Immutable 對象在碰到這種情況時不會報錯，返回的是 undefined。
在調試的時候，如果想查看一個 Immutable 對象的內部結構，建議使用 toJSON() 先轉換為普通的 Mutable 對象。
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
