本篇只是對Immutable.js的簡單介紹，後續會繼續分享其具體實踐應用。
什麼是Immutable Data？
Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.
-- 官方文件對其描述
Immutable Data 就是一旦建立，就不能再被更改的資料。對 Immutable 物件的任何修改或新增刪除操作都會返回一個新的 Immutable 物件。Immutable 實現的原理是 Persistent Data Structure（持久化資料結構），也就是使用舊資料建立新資料時，要保證舊資料同時可用且不變。同時為了避免 deepCopy 把所有節點都複製一遍帶來的效能損耗，Immutable 使用了Structural Sharing（結構共享），即如果物件樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享。請看下面動畫：
Immutable的優缺點一覽
優點
1. 降低 Mutable 帶來的複雜度
共享的可變狀態是萬惡之源，舉個簡單的例子就是js中的引用賦值：
var obj = { a: 1 };
var copy_obj = obj;
copy_obj.a = 2;
console.log(obj.a); // 2
複製程式碼引用賦值雖然可以節省記憶體，但當應用複雜之後，可變狀態往往會變成噩夢，通常一般的做法是使用shallowCopy或者deepCopy來避免被修改，但這樣造成了CPU和記憶體的消耗，不過Immulate可以很好地解決這些問題。
2. 節省記憶體空間
上面提到了結構共享，Immutable.js 使用這種方式會盡量複用記憶體，甚至以前使用的物件也可以再次被複用。沒有被引用的物件會被垃圾回收。
import { Map } from 'immutable';
let a = Map({
select: 'users',
filter: Map({ name: 'Cam' })
})
let b = a.set('select', 'people');
a === b; // false
a.get('filter') === b.get('filter'); // true
複製程式碼上面 a 和 b 共享了沒有變化的 filter 節點。
3. Undo/Redo，Copy/Paste，隨意穿越！
因為每次資料都是不一樣的，只要把這些資料放到一個陣列裡儲存起來，想回退到哪裡就拿出對應資料即可，很容易開發出撤銷重做這種功能。
4. 擁抱函數語言程式設計
Immutable（持久化資料結構）本身就是函數語言程式設計中的概念。函數語言程式設計關心資料的對映，指令式程式設計關心解決問題的步驟，純函數語言程式設計比物件導向更適用於前端開發。因為只要輸入一致，輸出必然一致，這樣開發的元件更易於除錯和組裝。
缺點
拋開學習成本和額外引入的資原始檔這些不說，我們來看看使用過程中有哪些不爽的地方。
1. 容易與原生物件混
主要是Immutable的API設計的和原生物件類似，容易混淆操作。例如其中Map和List的操作：
// Immutable
const map = Map({ a: 1, b: 2 });
const list = List([1,2,3]);
// 原生js
const obj = { a: 1, b: 2 };
const arry = [1,2,3];
// 取值方式對比
console.log(map.get('a'));
console.log(list.get(0));
console.log(obj.a);
console.log(arry[0]);
複製程式碼Immutable.js簡介
Facebook 工程師 Lee Byron 花費 3 年時間打造，與 React 同期出現，但沒有被預設放到 React 工具集裡（React 提供了簡化的 Helper）。它內部實現了一套完整的 Persistent Data Structure，還有很多易用的資料型別。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函式式操作方法。同時 API 也儘量與 Object 或 Array 類似。
Immutable.js 的幾種資料型別
- List: 有序索引集，類似JavaScript中的Array。
- Map: 無序索引集，類似JavaScript中的Object。
- OrderedMap: 有序的Map，根據資料的set()進行排序。
- Set: 沒有重複值的集合。
- OrderedSet: 有序的Set，根據資料的add進行排序。
- Stack: 有序集合，支援使用unshift()和shift()新增和刪除。
- Record: 一個用於生成Record例項的類。類似於JavaScript的Object，但是隻接收特定字串為key，具有預設值。
- Seq: 序列，但是可能不能由具體的資料結構支援。
- Collection: 是構建所有資料結構的基類，不可以直接構建。
用的最多就是List和Map，所以在這裡主要介紹這兩種資料型別的API。
Immutable.js 的常用API
fromJS()
作用：將一個js資料轉換為Immutable型別的資料
用法：fromJS(value, converter)
簡介：value是要轉變的資料，converter是要做的操作。第二個引數可不填，預設情況會將陣列準換為List型別，將物件轉換為Map型別，其餘不做操作
程式碼實現：
const obj = Immutable.fromJS({a:'123',b:'234'},function (key, value, path) {
console.log(key, value, path)
return isIndexed(value) ? value.toList() : value.toOrderedMap())
})
複製程式碼toJS()
作用：將一個Immutable資料轉換為JS型別的資料
用法：value.toJS()
is()
作用：對兩個物件進行比較
用法：is(map1,map2)
簡介：和js中物件的比較不同，在js中比較兩個物件比較的是地址，但是在Immutable中比較的是這個物件hashCode和valueOf，只要兩個物件的hashCode相等，值就是相同的，避免了深度遍歷，提高了效能
程式碼實現：
import { Map, is } from 'immutable'
const map1 = Map({ a: 1, b: 1, c: 1 })
const map2 = Map({ a: 1, b: 1, c: 1 })
map1 === map2 //false
Object.is(map1, map2) // false
is(map1, map2) // true
複製程式碼List() 和 Map()
作用：用來建立一個新的List/Map物件 用法:
//List
Immutable.List(); // 空List
Immutable.List([1, 2]);
//Map
Immutable.Map(); // 空Map
Immutable.Map({ a: '1', b: '2' });
複製程式碼List.isList() 和 Map.isMap()
作用：判斷一個資料結構是不是List/Map型別 用法：
List.isList([]); // false
List.isList(List()); // true
Map.isMap({}) // false
Map.isMap(Map()) // true
複製程式碼size
作用：屬性，獲取List/Map的長度，等同於ImmutableData.count();
get() 、 getIn()
作用：獲取資料結構中的資料
//獲取List索引的元素
ImmutableData.get(0);
// 獲取Map對應key的value
ImmutableData.get('a');
// 獲取巢狀陣列中的資料
ImmutableData.getIn([1, 2]);
// 獲取巢狀map的資料
ImmutableData.getIn(['a', 'b']);
複製程式碼has() 、 hasIn()
作用：判斷是否存在某一個key 用法：
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,'b']) //true
複製程式碼includes()
作用：判斷是否存在某一個value 用法：
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //true
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字元2
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //false
Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true
複製程式碼first() 、 last()
作用：用來獲取第一個元素或者最後一個元素，若沒有則返回undefined 程式碼：
Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1
Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1
Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}
複製程式碼資料修改 注：這裡對於資料的修改，是對原資料進行操作後的值賦值給一個新的資料，並不會對原資料進行修改，因為Immutable是不可變的資料型別。
設定 set()
作用：設定第一層key、index的值 用法：
const originalList = List([ 0 ]);
// List [ 0 ]
originalList.set(1, 1);
// List [ 0, 1 ]
originalList.set(0, 'overwritten');
// List [ "overwritten" ]
originalList.set(2, 2);
// List [ 0, undefined, 2 ]
List().set(50000, 'value').size;
// 50001
const originalMap = Map()
const newerMap = originalMap.set('key', 'value')
const newestMap = newerMap.set('key', 'newer value')
originalMap
// Map {}
newerMap
// Map { "key": "value" }
newestMap
// Map { "key": "newer value" }
複製程式碼List在使用的時候，將index為number值設定為value。Map在使用的時候，將key的值設定為value。
在List中使用時，若傳入的number為負數，則將index為size+index的值設定為value，例，若傳入-1，則將size-1的值設為value。若傳入的number的值超過了List的長度，則將List自動補全為傳入的number的值，將number設定為value，其餘用undefined補全。注：跟js中不同，List中不存在空位，[,,,],List中若沒有值，則為undefined。
setIn()
作用：設定深層結構中某屬性的值 用法：
const originalMap = Map({
subObject: Map({
subKey: 'subvalue',
subSubObject: Map({
subSubKey: 'subSubValue'
})
})
})
const newMap = originalMap.setIn(['subObject', 'subKey'], 'ha ha!')
// Map {
// "subObject": Map {
// "subKey": "ha ha!",
// "subSubObject": Map { "subSubKey": "subSubValue" }
// }
// }
const newerMap = originalMap.setIn(
['subObject', 'subSubObject', 'subSubKey'],
'ha ha ha!'
)
// Map {
// "subObject": Map {
// "subKey": "subvalue",
// "subSubObject": Map { "subSubKey": "ha ha ha!" }
// }
// }
複製程式碼用法與set()一樣，只是第一個引數是一個陣列，代表要設定的屬性所在的位置
刪除 delete
作用：用來刪除第一層結構中的屬性 用法：
// List
List([ 0, 1, 2, 3, 4 ]).delete(0);
// List [ 1, 2, 3, 4 ]
// Map
const originalMap = Map({
key: 'value',
otherKey: 'other value'
})
// Map { "key": "value", "otherKey": "other value" }
originalMap.delete('otherKey')
// Map { "key": "value" }
複製程式碼deleteIn()
用來刪除深層資料，用法參考setIn
deleteAll() (Map獨有，List沒有)
作用：用來刪除Map中的多個key 用法：deleteAll(keys: Iterable): this 程式碼示例：
const names = Map({ a: "Aaron", b: "Barry", c: "Connor" })
names.deleteAll([ 'a', 'c' ])
// Map { "b": "Barry" }
複製程式碼更新 update()
作用：對物件中的某個屬性進行更新，可對原資料進行相關操作 用法：
////List
const list = List([ 'a', 'b', 'c' ])
const result = list.update(2, val => val.toUpperCase())
///Map
const aMap = Map({ key: 'value' })
const newMap = aMap.update('key', value => value + value)
複製程式碼updateIn()
用法參考setIn
清除 clear()
作用：清除所有資料
用法：clear(): this
程式碼示例：
Map({ key: 'value' }).clear() //Map
List([ 1, 2, 3, 4 ]).clear() // List
List中的各種刪除與插入
List對應的資料結構是js中的陣列，所以陣列的一些方法在Immutable中也是通用的，比如push，pop,shift，
unshift，insert。
複製程式碼push()
在List末尾插入一個元素
pop()
在List末尾刪除一個元素
unshift
在List首部插入一個元素
shift
在List首部刪除一個元素
insert
在List的index處插入元素 程式碼實現：
List([ 0, 1, 2, 3, 4 ]).insert(6, 5)
//List [ 0, 1, 2, 3, 4, 5 ]
List([ 1, 2, 3, 4 ]).push(5)
// List [ 1, 2, 3, 4, 5 ]
List([ 1, 2, 3, 4 ]).pop()
// List[ 1, 2, 3 ]
List([ 2, 3, 4]).unshift(1);
// List [ 1, 2, 3, 4 ]
List([ 0, 1, 2, 3, 4 ]).shift();
// List [ 1, 2, 3, 4 ]
複製程式碼List中還有一個特有的方法用法設定List的長度，setSize()
List([]).setSize(2).toJS() //[undefined,undefined]
複製程式碼關於merge
merge
作用：淺合併，新資料與舊資料對比，舊資料中不存在的屬性直接新增，就資料中已存在的屬性用新資料中的覆蓋
mergrWith
作用：自定義淺合併，可自行設定某些屬性的值
mergeIn
作用：對深層資料進行淺合併
mergeDeep
作用：深合併，新舊資料中同時存在的的屬性為新舊資料合併之後的資料
mergeDeepIn
作用：對深層資料進行深合併
mergrDeepWith
作用：自定義深合併，可自行設定某些屬性的值
這裡用一段示例徹底搞懂merge，此示例為Map結構，List與Map原理相同
const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}});
const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}});
const Map3 = Map1.merge(Map2);
//Map {a:111,b:222,c:{e:444,f:555}}
const Map4 = Map1.mergeDeep(Map2);
//Map {a:111,b:222,c:{d:333,e:444,f:555}}
const Map5 = Map1.mergeWith((oldData,newData,key)=>{
if(key === 'a'){
return 666;
}else{
return newData
}
},Map2);
//Map {a:666,b:222,c:{e:444,f:555}}
複製程式碼序列演算法
concat()
作用：物件的拼接，用法與js陣列中的concat()相同，返回一個新的物件。
用法：const List = list1.concat(list2)
map()
作用：遍歷整個物件，對Map/List元素進行操作，返回一個新的物件。 用法：
Map({a:1,b:2}).map(val=>10*val)
//Map{a:10,b:20}
複製程式碼Map特有的mapKey()
作用：遍歷整個物件，對Map元素的key進行操作，返回一個新的物件。 用法：
Map({a:1,b:2}).mapKey(val=>val+'l')
//Map{al:10,bl:20}
複製程式碼Map特有的mapEntries()
作用：遍歷整個物件，對Map元素的key和value同時進行操作，返回一個新的物件。Map的map()也可實現此功能。 用法：
Map({a:1,b:2}).map((key,val)=>{
return [key+'l',val*10]
})
//Map{al:10,bl:20}
複製程式碼過濾 filter
作用：返回一個新的物件，包括所有滿足過濾條件的元素 用法：
Map({a:1,b:2}).filter((key,val)=>{
return val == 2
})
//Map{b:2}
複製程式碼還有一個filterNot()方法，與此方法正好相反。
反轉 reverse
作用：將資料的結構進行反轉 程式碼示例：
Immutable.fromJS([1, 2, 3, 4, 5]).reverse();
// List [5,4,3,2,1]
Immutable.fromJS({a:1,b:{c:2,d:3},e:4}).recerse();
//Map {e:4,b:{c:2,d:3},a:1}
複製程式碼排序 sort & sortBy
作用：對資料結構進行排序 程式碼示例：
///List
Immutable.fromJS([4,3,5,2,6,1]).sort()
// List [1,2,3,4,5,6]
Immutable.fromJS([4,3,5,2,6,1]).sort((a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
// List [1,2,3,4,5,6]
Immutable.fromJS([{a:3},{a:2},{a:4},{a:1}]).sortBy((val,index,obj)=>{
return val.get('a')
},(a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
//List [ {a:3}, {a:2}, {a:4}, {a:1} ]
//Map
Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort()
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort((a,b)=>{
if (a < b) { return -1; }
if (a > b) { return 1; }
if (a === b) { return 0; }
})
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sortBy((value, key, obj)=> {
return value
})
//Map {b: 1, c: 2, a: 3, d: 5}
複製程式碼分組 groupBy
作用：對資料進行分組
const listOfMaps = List([
Map({ v: 0 }),
Map({ v: 1 }),
Map({ v: 1 }),
Map({ v: 0 }),
Map({ v: 2 })
])
const groupsOfMaps = listOfMaps.groupBy(x => x.get('v'))
// Map {
// 0: List [ Map{ "v": 0 }, Map { "v": 0 } ],
// 1: List [ Map{ "v": 1 }, Map { "v": 1 } ],
// 2: List [ Map{ "v": 2 } ],
// }
複製程式碼查詢資料
indexOf() 、 lastIndexOf Map不存在此方法 作用：和js陣列中的方法相同，查詢第一個或者最後一個value的index值，找不到則返回-1 用法：
Immutable.fromJS([1,2,3,4]).indexof(3) //2
Immutable.fromJS([1,2,3,4]).lastIndexof(3) //2
複製程式碼findIndex() 、 findLastIndex() Map不存在此方法
作用：查詢滿足要求的元素的index值 用法：
Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{
return value%2 === 0;
}) // 1
Immutable.fromJS([1,2,3,4]).findLastIndex((value,index,array)=>{
return index%2 === 0;
}) // 3
複製程式碼find() 、 findLast()
作用：查詢滿足條件的元素的value值 用法：
Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{
return value%2 === 0;
}) // 2
Immutable.fromJS([1,2,3,4]).findLast((value,index,array)=>{
return value%2 === 0;
}) // 4
複製程式碼findKey() 、 findLastKey()
作用：查詢滿足條件的元素的key值 用法：
Immutable.fromJS([1,2,3,4]).findKey((value,index,array)=>{
return value%2 === 0;
}) // 1
Immutable.fromJS([1,2,3,4]).findLastKey((value,index,array)=>{
return value%2 === 0;
}) // 3
複製程式碼findEntry() 、 findLastEntry()
作用：查詢滿足條件的元素的鍵值對 key:value 用法：
Immutable.fromJS([1,2,3,4]).findEntry((value,index,array)=>{
return value%2 === 0;
}) // [1,2]
Immutable.fromJS([1,2,3,4]).findLastEntry((value,index,array)=>{
return value%2 === 0;
}) // [3,4]
複製程式碼keyOf() lastKeyOf()
作用：查詢某一個value對應的key值 用法：
Immutable.fromJS([1,2,3,4]).keyOf(2) //1
Immutable.fromJS([1,2,3,4]).lastKeyOf(2) //1
複製程式碼max() 、 maxBy()
作用：查詢最大值 用法:
Immutable.fromJS([1, 2, 3, 4]).max() //4
Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{
return value.get('a')
}) //{a:4}
複製程式碼min() 、 minBy()
作用：查詢最小值 用法:
Immutable.fromJS([1, 2, 3, 4]).min() //1
Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{
return value.get('a')
}) //{a:1}
複製程式碼建立子集
slice()
作用： 和原生js中陣列的slice陣列一樣，包含兩個引數，start和end，start代表開始擷取的位置，end代表結束的位置，不包括第end的元素。若不包括end，則返回整個物件，若end為負數，則返回（start，length-end）對應的資料。若start只有一個並且為負數，則返回最後的end個元素。 用法：
Immutable.fromJS([1, 2, 3, 4]).slice(0); //[1,2,3,4]
Immutable.fromJS([1, 2, 3, 4]).slice(0,2); //[1,2]
Immutable.fromJS([1, 2, 3, 4]).slice(-2); //[3,4]
Immutable.fromJS([1, 2, 3, 4]).slice(0,-2); //[1,2]
複製程式碼rest()
作用：返回除第一個元素之外的所有元素 用法:
Immutable.fromJS([1, 2, 3, 4]).rest()//[2,3,4]
複製程式碼butLast()
作用：返回除最後一個元素之外的所有元素 用法:
Immutable.fromJS([1, 2, 3, 4]).rest()//[1,2,3]
複製程式碼skip()
作用：有一個引數n, 返回截掉前n個元素之後剩下的所有元素 用法:
Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]\
複製程式碼skipLast()
作用：有一個引數n, 返回截掉最後n個元素之後剩下的所有元素 用法:
Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]
複製程式碼skipWhile()
作用：返回從第一次返回false之後的所有元素
Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.skipWhile((value,index,list)=>{
return value > 2;
}))// [1,2,3,4]
skipUntil()
複製程式碼作用：返回從第一次返回true之後的所有元素
Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.skipWhile((value,index,list)=>{
return value > 2;
}))// [3,4]
複製程式碼take()
作用：有一個引數n, 返回前n個元素 用法：
Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]
複製程式碼takeLast()
作用：有一個引數n, 返回最後n個元素 用法：
Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]
複製程式碼takeWhile()
作用：返回從第一次返回false之前的所有元素
Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.takeWhile((value,index,list)=>{
return value > 2;
}))// []
複製程式碼takeUntil()
作用：返回從第一次返回true之前的所有元素
Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.takeUntil((value,index,list)=>{
return value > 2;
}))// [1,2]
複製程式碼處理資料
reduce()
作用：和js中陣列中的reduce相同,按索引升序的順序處理元素 用法：
Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 3 6 10
複製程式碼reduceRight()
作用：和js中陣列中的reduce相同,按索引降序的順序處理元素 用法：
Immutable.fromJS([1,2,3,4]).reduceRight((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 7 9 10
複製程式碼every()
作用：判斷整個物件總中所有的元素是不是都滿足某一個條件，都滿足返回true，反之返回false。
程式碼：
Immutable.fromJS([1,2,3,4]).every((value,index,arr)=>{
return value > 2
}) // false
複製程式碼some()
作用：判斷整個物件總中所有的元素是不是存在滿足某一個條件的元素，若存在返回true，反之返回false。 程式碼：
Immutable.fromJS([1,2,3,4]).some((value,index,arr)=>{
return value > 2
}) // true
複製程式碼join()
作用：同js中陣列的join方法。把準換為字串 用法：
Immutable.fromJS([1,2,3,4]).join(',') //1,2,3,4
複製程式碼isEmpty()
作用：判斷是否為空 用法:
Immutable.fromJS([]).isEmpty(); // true
Immutable.fromJS({}).isEmpty(); // true
複製程式碼count()
作用：返回元素個數，可自定義條件，返回滿足條件的個數 用法：
const list = Immutable.fromJS([1,2,3,4]);
const map = Immutable.fromJS({a:1,b:2,c:3,d:4});
list.count((value,index,list)=>{
return value > 2;
}) //2
map.count((value,index,list)=>{
return value > 2;
}) //2
複製程式碼countBy()
作用：與count不同的是，countBy返回一個物件 用法：
const list = Immutable.fromJS([1,2,3,4]);
const map = Immutable.fromJS({a:1,b:2,c:3,d:4});
list.countBy((value,index,list)=>{
return value > 2;
} //{false: 2, true: 2}
map.countBy((value,index,list)=>{
return value > 2;
} //{false: 2, true: 2}
複製程式碼