Immutable.js瞭解一下？

本篇只是對Immutable.js的簡單介紹，後續會繼續分享其具體實踐應用。html

什麼是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（結構共享），即若是對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其它節點則進行共享。請看下面動畫： git

Immutable的優缺點一覽

優勢

1. 下降 Mutable 帶來的複雜度

共享的可變狀態是萬惡之源，舉個簡單的例子就是js中的引用賦值：github

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，隨意穿越！

由於每次數據都是不同的，只要把這些數據放到一個數組裏儲存起來，想回退到哪裏就拿出對應數據便可，很容易開發出撤銷重作這種功能。bash

4. 擁抱函數式編程

Immutable（持久化數據結構）自己就是函數式編程中的概念。函數式編程關心數據的映射，命令式編程關心解決問題的步驟，純函數式編程比面向對象更適用於前端開發。由於只要輸入一致，輸出必然一致，這樣開發的組件更易於調試和組裝。markdown

缺點

拋開學習成本和額外引入的資源文件這些不說，咱們來看看使用過程當中有哪些不爽的地方。數據結構

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}
複製代碼

參考

immutable-js官方文檔