本篇只是对Immutable.js的简单介绍，后续会继续分享其具体实践应用。
 
immutable.jpeg
 
什么是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的优缺点一览
 优点
 
降低 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（持久化数据结构）本身就是函数式编程中的概念。函数式编程关心数据的映射，命令式编程关心解决问题的步骤，纯函数式编程比面向对象更适用于前端开发。因为只要输入一致，输出必然一致，这样开发的组件更易于调试和组装。
 缺点
 抛开学习成本和额外引入的资源文件这些不说，我们来看看使用过程中有哪些不爽的地方。
 
容易与原生对象混
 主要是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 类似。
 
immutablejs-getters-and-setters-everywhere.jpg
 
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}
 
参考
 immutable-js官方文档
 
作者：桂圆_noble
 链接：https://www.jianshu.com/p/0fa8c7456c15
 来源：简书
 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

导入
 
案例：
 
const obj ={
    name:'Shirley'
}

const newObj = obj

console.log('obj',obj)
console.log('newObj',newObj)
 
由于js的对象和数组都是引用类型。所以newObj的obj实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。
 
 
尝试修改一下数据：
 
const obj ={
    name:'Shirley'
}

const newObj = obj

newObj.name = 'zhangsan'

console.log('obj',obj)
console.log('newObj',newObj)
 
结果：
 
 可以看到，newObj的修改也会引起obj的修改。要解决这个问题，js中提供了另一种修改数据的方式，要修改一个数据之前先制作一份数据的拷贝，像这样：
 
const obj ={
    name:'Shirley'
}

const newObj = Object.assign({},obj) // 对象的合并 也就是说在内存中开辟了一块内存空间，两者的地址不一样了

newObj.name = 'zhangsan'

console.log('obj',obj)
console.log('newObj',newObj)
 

 我们可以使用很多方式在js中复制数据，比如…, Object.assign, Object.freeze, slice, concat, map, filter, reduce等方式进行复制，但这些都是浅拷贝，就是只拷贝第一层数据，更深层的数据还是同一个引用，比如：
 
const obj ={
    name:'Shirley',
    count:{
        num:100
    }
}

const newObj = Object.assign({},obj) // 对象的合并 也就是说在内存中开辟了一块内存空间，两者的地址不一样了

newObj.count.num = 2000

console.log('obj',obj)
console.log('newObj',newObj)
 

 可以看到，当在更改newState更深层次的数据的时候，还是会影响到state的值。如果要深层复制，就得一层一层的做递归拷贝，这是一个复杂的问题。虽然有些第三方的库已经帮我们做好了，比如lodash的cloneDeep方法。但是深拷贝是非常消耗性能的。
 
Immutable
 
不可变数据 (Immutable Data )就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构（ Persistent Data Structure），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的s性能损耗，Immutable 使用了 结构共享（Structural Sharing），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
 
 
immutable.js的优缺点
 
优点：
 
降低immutable带来的复杂度
节省内存
历史追溯性（时间旅行）：时间旅行指的是，每时每刻的值都被保留了，想回退到哪一步只要简单的将数据取出就行，想一下如果现在页面有个撤销的操作，撤销前的数据被保留了，只需要取出就行，这个特性在redux或者flux中特别有用
拥抱函数式编程：immutable本来就是函数式编程的概念，纯函数式编程的特点就是，只要输入一致，输出必然一致，相比于面向对象，这样开发组件和调试更方便。推荐一本函数式编程的在线免费书《JS 函数式编程指南》
 
缺点：
 
需要重新学习api
资源包大小增加（源码5000行左右）
容易与原生对象混淆：由于api与原生不同，混用的话容易出错。
 
使用Immutable.js
 
参考官网重点讲解数据不可变数据的创建、更新及比较方式 。
 
Map
 
import { Map } from 'immutable'

const map = Map({
  a: 1,
  b: 2,
  c: 3
})

const newMap = map.set('b', 20) // immutable数据每次都是生成新的再重新调用set进行修改，所以需要 重新赋值给一个新的变量

console.log(map, newMap) // immutable.Map不是原生的对象
console.log(map.b, newMap.b) // immutable.Map不是原生的对象, 所以是undefined
console.log(map.get('b'), newMap.get('b')) // 要取值，需要调用get(key)方法，可以看到，两个值不一样

const obj = {
  a: 1,
  b: 2,
  c: 3
}

console.log(Map.isMap(map), Map.isMap(obj)) // true false, 使用Map.isMap来判断是否是一个immutable.Map类型
 
List
 
import { List } from 'immutable'

const list = List([1, 2, 3, 4])
const newList = list.push(5)
console.log(list, newList)
console.log(list[4], newList[4]) // undefined undefined
console.log(list.get(4), newList.get(4)) // undefined 5
console.log(list.size, newList.size) // 4 5

const arr = [1, 2, 3, 4]

console.log(List.isList(list), List.isList(arr)) // true false
 
equals & is
 
import { Map, is } from 'immutable'

const map = Map({
  a: 1,
  b: 2,
  c: 3
})

const anotherMap = Map({
  a: 1,
  b: 2,
  c: 3
})

console.log(map == anotherMap) // false
console.log(map === anotherMap) // false
console.log(map.equals(anotherMap)) // 使用equals进行比较 true
console.log(is(map, anotherMap)) // 使用is进行比较 true
 
List常用api
 
import { List } from 'immutable'

const list = List([1, 2, 3, 4])
const list1 = list.push(5)
const list2 = list1.unshift(0)
const list3 = list.concat(list1, list2)
const list4 = list.map(v => v * 2)

console.log(list.size, list1.size, list2.size, list3.size, list4.toJS()) // 4 5 6 15, [2, 4, 6, 8]
 
Map常用api
 
import { Map } from 'immutable'

const alpha = Map({
  a: 1,
  b: 2,
  c: 3
})
const objKeys = alpha.map((v, k) => k)
console.log(objKeys.join()) // a, b, c


const map1 = Map({
  a: 1,
  b: 2
})
const map2 = Map({
  c: 3,
  d: 4
})
const obj = {
  d: 400,
  e: 50
}

const mergedMap = map1.merge(map2, obj)

console.log(mergedMap.toObject())
console.log(mergedMap.toJS())
 
嵌套数据结构
 
const { fromJS } = require('immutable');
const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } });

const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }

console.log(nested2.getIn([ 'a', 'b', 'd' ])); // 6

const nested3 = nested2.updateIn([ 'a', 'b', 'd' ], value => value + 1);
console.log(nested3);
// Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }

const nested4 = nested3.updateIn([ 'a', 'b', 'c' ], list => list.push(6));
// Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }
 
在redux中使用immutable.js
 
redux官网推荐使用redux-immutable进行redux和immutable的集成。几个注意点：
 
redux中，利用combineReducers来合并多个reduce, redux自带的combineReducers只支持原生js形式的，所以需要使用redux-immutable提供的combineReducers来代替
 
// 使用redux-immutable提供的combineReducers方法替换redux里的combineReducers
import {combineReducers} from 'redux-immutable'
import reducerOne from './reducerOne'
import reducerTwo from './reducerTwo'
 
const rootReducer = combineReducers({
    reducerOne,
    reducerTwo
});
 
export default rootReducer;
 
reducer中的initialState也需要初始化成immutable类型, 比如一个counter的reducer
 
import { Map } from 'immutable'

import ActionTypes from '../actions'

const initialState = Map({
  count: 0
})

export default (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.INCREAMENT:
      return state.set('count', state.get('count') + 1) // 使用set或setIn来更改值, get或者getIn来取值
    case ActionTypes.DECREAMENT:
      return state.set('count', state.get('count') - 1)
    default:
      return state
  }
}
 
state成为了immutable类型，connect的mapStateToProp也需要相应的改变
 
const mapStateToProps = state => ({
  count: state.getIn(['counter', 'count']) // 永远不要在mapStateToProps里使用`toJS`方法，因为它永远返回一个新的对象
})
 
在shouldComponentUpdate里就可以使用immutable.is或者instance.equals来进行数据的对比了。