本文主要整理了Immutable.js常用API的使用。
Immutable 是什麼?
關于Immutable的定義,官方文檔是這樣說的:
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資料就是一旦建立,就不能更改的資料。每當對Immutable對象進行修改的時候,就會傳回一個新的Immutable對象,以此來保證資料的不可變。對于Immutable的好處及介紹,大家可以參考Immutable 詳解及 React 中實踐,這篇文章介紹的很清楚。
因為Immutable的官方文檔有點晦澀難懂,本文隻是用來整理Immutable常用的API的使用,便于使用與查詢,想了解更詳細的内容,請戳這裡~
有不妥的地方歡迎大家指出~
Immutable 的幾種資料類型
-
: 有序索引集,類似JavaScript中的Array。List
-
: 無序索引集,類似JavaScript中的Object。Map
-
: 有序的OrderedMap
,根據資料的set()進行排序。Map
-
: 沒有重複值的集合。Set
-
: 有序的OrderedSet
,根據資料的add進行排序。Set
-
: 有序集合,支援使用unshift()和shift()添加和删除。Stack
-
: 傳回一個Seq.Indexed類型的集合,這個方法有三個參數,start表示開始值,預設值為0,end表示結束值,預設為無窮大,step代表每次增大的數值,預設為1.如果start = end,則傳回空集合。Range()
-
: 傳回一個vSeq.Indexe類型的集合,這個方法有兩個參數,value代表需要重複的值,times代表要重複的次數,預設為無窮大。Repeat()
-
: 一個用于生成Record執行個體的類。類似于JavaScript的Object,但是隻接收特定字元串為key,具有預設值。Record
-
: 序列,但是可能不能由具體的資料結構支援。Seq
-
: 是建構所有資料結構的基類,不可以直接建構。Collection
用的最多就是List和Map,是以在這裡主要介紹這兩種資料類型的API。
API的使用
1.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())
})
2.toJS()
作用:将一個Immutable資料轉換為JS類型的資料。
用法:
value.toJS()
3.is()
作用:對兩個對象進行比較。
用法:
is(map1,map2)
簡介:和js中對象的比較不同,在js中比較兩個對象比較的是位址,但是在Immutable中比較的是這個對象
hashCode
和
valueOf
,隻要兩個對象的
hashCode
相等,值就是相同的,避免了深度周遊,提高了性能。
代碼實作:
import { Map, is } from 'immutable'
const map1 = Map({ a: , b: , c: })
const map2 = Map({ a: , b: , c: })
map1 === map2 //false
Object.is(map1, map2) // false
is(map1, map2) // true
4.List 和 Map
建立
List() 和 Map()
作用:用來建立一個新的List/Map對象
用法:
//List
List(): List<any>
List<T>(): List<T>
//Map
Map(): Map<any>
Map<T>(): Map<T>
List.of() 和 Map.of()
作用:建立一個新的包含value的List/Map對象
用法:
List.of<T>(...values: Array<T>): List<T>
Map.of<T>(...values: Object<T>): Map<T>
判斷
List.isList() 和 Map.isMap()
作用:判斷一個資料結構是不是List/Map類型
用法:
List.isList(maybeList: any): boolean
Map.isMap(maybeMap: any): boolean
長度
size
作用:擷取List/Map的長度
資料讀取
get() 、 getIn()
作用:擷取資料結構中的資料
has() 、 hasIn()
作用:判斷是否存在某一個key
用法:
Immutable.fromJS([,,,{a:,b:}]).has('0'); //true
Immutable.fromJS([,,,{a:,b:}]).has('0'); //true
Immutable.fromJS([,,,{a:,b:}]).hasIn([,'b']) //true
includes()
作用:判斷是否存在某一個value
用法:
Immutable.fromJS([,,,{a:,b:}]).includes(); //true
Immutable.fromJS([,,,{a:,b:}]).includes('2'); //false 不包含字元2
Immutable.fromJS([,,,{a:,b:}]).includes(); //false
Immutable.fromJS([,,,{a:,b:}]).includes({a:,b:}) //false
Immutable.fromJS([,,,{a:,b:}]).includes(Immutable.fromJS({a:,b:})) //true
first() 、 last()
作用:用來擷取第一個元素或者最後一個元素,若沒有則傳回undefined
代碼:
Immutable.fromJS([,,,{a:,b:}]).first()//1
Immutable.fromJS([,,,{a:,b:}]).last()//{a:4,b:5}
Immutable.fromJS({a:,b:,c:{d:,e:}}).first() //1
Immutable.fromJS({a:,b:,c:{d:,e:}}).first() //{d:3,e:4}
資料修改
注:這裡對于資料的修改,是對原資料進行操作後的值指派給一個新的資料,并不會對原資料進行修改,因為Immutable是不可變的資料類型。
設定 set()
作用:設定第一層key、index的值
用法:
set(index: number, value: T): List<T>
set(key: K, value: V): this
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。
代碼實作:
//List
const originalList = List([ ]);
// List [ 0 ]
originalList.set(, );
// List [ 0, 1 ]
originalList.set(, 'overwritten');
// List [ "overwritten" ]
originalList.set(, );
// List [ 0, undefined, 2 ]
List().set(, 'value').size;
// 50001
//Map
const { Map } = require('immutable')
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" }
setIn()
作用:設定深層結構中某屬性的值
用法:
用法與set()一樣,隻是第一個參數是一個數組,代表要設定的屬性所在的位置
删除 delete
作用:用來删除第一層結構中的屬性
用法:
delete(index: number): List<T> //List
delete(key: K): this //Map
deleteIn()
用來删除深層資料,用法參考setIn
deleteAll() (Map獨有,List沒有)
作用:用來删除Map中的多個key
用法:
deleteAll(keys: Iterable<K>): this
代碼示例:
const names = Map({ a: "Aaron", b: "Barry", c: "Connor" })
names.deleteAll([ 'a', 'c' ])
// Map { "b": "Barry" }
更新 update()
作用:對對象中的某個屬性進行更新,可對原資料進行相關操作
用法:
update(index: number, updater: (value: T) => T): this //List
update(key: K, updater: (value: V) => V): this //Map
代碼示例:
List
const list = List([ 'a', 'b', 'c' ])
const result = list.update(, 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([ , , , ]).clear() // List
List中的各種删除與插入
List對應的資料結構是js中的數組,是以數組的一些方法在Immutable中也是通用的,比如push,pop,shift,unshift,insert。
- push():在List末尾插入一個元素
- pop(): 在List末尾删除一個元素
- unshift: 在List首部插入一個元素
- shift: 在List首部删除一個元素
- insert:在List的index處插入元素
代碼實作:
List([ , , , , ]).insert(, )
//List [ 0, 1, 2, 3, 4, 5 ]
List([ , , , ]).push()
// List [ 1, 2, 3, 4, 5 ]
List([ , , , ]).pop()
// List[ 1, 2, 3 ]
List([ , , ]).unshift();
// List [ 1, 2, 3, 4 ]
List([ , , , , ]).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:,b:,c:{d:,e:}});
const Map2 = Immutable.fromJS({a:,b:,c:{e:,f:}});
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 ;
}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:,b:}).map(val=>*val)
//Map{a:10,b:20}
Map特有的mapKey()
作用:周遊整個對象,對Map元素的key進行操作,傳回一個新的對象。
用法:
Map({a:,b:}).mapKey(val=>val+'l')
//Map{al:10,bl:20}
Map特有的mapEntries()
作用:周遊整個對象,對Map元素的key和value同時進行操作,傳回一個新的對象。Map的map()也可實作此功能。
用法:
Map({a:,b:}).map((key,val)=>{
return [key+'l',val*]
})
//Map{al:10,bl:20}
過濾 filter
作用:傳回一個新的對象,包括所有滿足過濾條件的元素
用法:
Map({a:,b:}).filter((key,val)=>{
return val ==
})
//Map{b:2}
還有一個filterNot()方法,與此方法正好相反。
反轉 reverse
作用:将資料的結構進行反轉
代碼示例:
Immutable.fromJS([, , , , ]).reverse();
// List [5,4,3,2,1]
Immutable.fromJS({a:,b:{c:,d:},e:}).recerse();
//Map {e:4,b:{c:2,d:3},a:1}
排序 sort & sortBy
作用:對資料結構進行排序
代碼示例:
///List
Immutable.fromJS([,,,,,]).sort()
// List [1,2,3,4,5,6]
Immutable.fromJS([,,,,,]).sort((a,b)=>{
if (a < b) { return ; }
if (a > b) { return ; }
if (a === b) { return ; }
})
// List [1,2,3,4,5,6]
Immutable.fromJS([{a:},{a:},{a:},{a:}]).sortBy((val,index,obj)=>{
return val.get('a')
},(a,b)=>{
if (a < b) { return ; }
if (a > b) { return ; }
if (a === b) { return ; }
})
//List [ {a:3}, {a:2}, {a:4}, {a:1} ]
//Map
Immutable.fromJS( {b:, a: , c: , d:} ).sort()
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:, a: , c: , d:} ).sort((a,b)=>{
if (a < b) { return ; }
if (a > b) { return ; }
if (a === b) { return ; }
})
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:, a: , c: , d:} ).sortBy((value, key, obj)=> {
return value
})
//Map {b: 1, c: 2, a: 3, d: 5}
分組 groupBy
作用:對資料進行分組
const listOfMaps = List([
Map({ v: }),
Map({ v: }),
Map({ v: }),
Map({ v: }),
Map({ v: })
])
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([,,,]).indexof() //2
Immutable.fromJS([,,,]).lastIndexof() //2
findIndex() 、 findLastIndex() Map不存在此方法
作用:查找滿足要求的元素的index值
用法:
Immutable.fromJS([,,,]).findIndex((value,index,array)=>{
return value% === ;
}) // 1
Immutable.fromJS([,,,]).findLastIndex((value,index,array)=>{
return index% === ;
}) // 3
find() 、 findLast()
作用:查找滿足條件的元素的value值
用法:
Immutable.fromJS([,,,]).find((value,index,array)=>{
return value% === ;
}) // 2
Immutable.fromJS([,,,]).findLast((value,index,array)=>{
return value% === ;
}) // 4
findKey() 、 findLastKey()
作用:查找滿足條件的元素的key值
用法:
Immutable.fromJS([,,,]).findKey((value,index,array)=>{
return value% === ;
}) // 1
Immutable.fromJS([,,,]).findLastKey((value,index,array)=>{
return value% === ;
}) // 3
findEntry() 、 findLastEntry()
作用:查找滿足條件的元素的鍵值對 key:value
用法:
Immutable.fromJS([,,,]).findEntry((value,index,array)=>{
return value% === ;
}) // [1,2]
Immutable.fromJS([,,,]).findLastEntry((value,index,array)=>{
return value% === ;
}) // [3,4]
keyOf() lastKeyOf()
作用:查找某一個value對應的key值
用法:
Immutable.fromJS([,,,]).keyOf() //1
Immutable.fromJS([,,,]).lastKeyOf() //1
max() 、 maxBy()
作用:查找最大值
用法:
Immutable.fromJS([, , , ]).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([, , , ]).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([, , , ]).slice(); //[1,2,3,4]
Immutable.fromJS([, , , ]).slice(,); //[1,2]
Immutable.fromJS([, , , ]).slice(); //[3,4]
Immutable.fromJS([, , , ]).slice(,); //[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([, , , ]).skipWhile(list.skipWhile((value,index,list)=>{
return value > ;
}))// [1,2,3,4]
skipUntil()
作用:傳回從第一次傳回true之後的所有元素
Immutable.fromJS([, , , ]).skipUntil(list.skipWhile((value,index,list)=>{
return value > ;
}))// [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([, , , ]).skipWhile(list.takeWhile((value,index,list)=>{
return value > ;
}))// []
takeUntil()
作用:傳回從第一次傳回true之前的所有元素
Immutable.fromJS([, , , ]).skipUntil(list.takeUntil((value,index,list)=>{
return value > ;
}))// [1,2]
處理資料
reduce()
作用:和js中數組中的reduce相同,按索引升序的順序處理元素
用法:
Immutable.fromJS([,,,]).reduce((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 3 6 10
reduceRight()
作用:和js中數組中的reduce相同,按索引降序的順序處理元素
用法:
Immutable.fromJS([,,,]).reduceRight((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
})
// 7 9 10
every()
作用:判斷整個對象總中所有的元素是不是都滿足某一個條件,都滿足傳回true,反之傳回false。
代碼:
Immutable.fromJS([,,,]).every((value,index,arr)=>{
return value >
}) // false
some()
作用:判斷整個對象總中所有的元素是不是存在滿足某一個條件的元素,若存在傳回true,反之傳回false。
代碼:
Immutable.fromJS([,,,]).some((value,index,arr)=>{
return value >
}) // 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([,,,]);
const map = Immutable.fromJS({a:,b:,c:,d:});
list.count((value,index,list)=>{
return value > ;
}) //2
map.count((value,index,list)=>{
return value > ;
}) //2
countBy()
作用:與count不同的是,countBy傳回一個對象
用法:
const list = Immutable.fromJS([,,,]);
const map = Immutable.fromJS({a:,b:,c:,d:});
list.countBy((value,index,list)=>{
return value > ;
} //{false: 2, true: 2}
map.countBy((value,index,list)=>{
return value > ;
} //{false: 2, true: 2}