React系列： immutable.js的使用方法

immutable常用api

---

1. 使用

import Immutable from 'immutable.js' ;//引入Immutable全局对象

2. 数据类型

import {Map, List, Set} from 'immutable.js';

• Map(obj) 无序集合， 存放（key, value）键值对， key可以是任意的数据类型 ; Map.isMap()判断是否是Map格式
• OrderedMap(obj) 有序的集合，根据设置的顺序，可以传入对象，可以传入键值对组成的数组
• Set(array) 没有重复项的集合
• OrderedSet() 每个值都唯一，且有序排列
• List(array)有序集合，类似于技js的数组

3.设置值的方法

Map.isMap() , List.isList() ， Set.isSet()

返回布尔值， 是否是该格式的数据

List.of() ， Set.of()

将传入的多个数据生成一个List / Set

size

个数，长度

set()

设置某个key的值，或者某个索引的值
map.set(key, value)
list.set(index, value)

delete()

删除指定key或者索引的值
delete(key)
delete(index)
注意： Map还有deleteAll()方法，传入一个数组，删除数组项对应的key值

clear()

清空集合

add() Set的方法

返回新set, 添加一个值

union() Set的方法

返回新set 并集

intersect() Set的方法

返回新set， 交集

subtract() Set的方法

返回新set， 差集

Set的静态方法

Set.fromKeys()

返回用集合 或者 js对象的key生成的新Set

Set.intersect()

返回两个Set的合集

const { Set } = require('immutable')
const intersected = Set.intersect([
  Set([ 'a', 'b', 'c' ])
  Set([ 'c', 'a', 't' ])
])
// Set [ "a", "c"" ]

Set.union()

返回新Set, Set的并集

---

List的方法

1. insert() 向list中插入一个或多个值，返回一个新的copy数据
2. push() 尾部出入一个值
3. pop() 尾部插入一个值
4. unshift() 头部插入一个值
5. shift() 头部移除一个值
6. setSize() 返回新list， list长度变成指定大小，如果指定长度小，会移除超过size的部分的值，否则用undefined填充

---

---

Map的方法

1. map1.merge(map2) 合并，相同key的被覆盖，返回值中key的顺序按照前面Map的来
2. map1.mergeWith((old, new, key) => {}, …collections),通过指定方法处理后的值合并给前者
3. mergeDeep() 深层合并
4. mergeDeepWith((old, new, key) => {}, …collections)

---

update()

更新指定的key或者索引对应的值，notSetValue指的是默认值
map:

update(key: K, notSetValue: V, updater: (value: V) => V): this
update(key: K, updater: (value: V) => V): this
update<R>(updater: (value: this) => R): R

list

update(index: number, notSetValue: T, updater: (value: T) => T): this
update(index: number, updater: (value: T) => T): this
update<R>(updater: (value: this) => R): R

setIn(keyPath, value)

keyPath是key或者index组成的数组，代表层级关系，从外到内；如果指定路径没有找到值，会自动创建一个

deleteIn(keyPath)

updateIn(keyPath, [notSetVlue,] updater)

mergeIn(keypath, …collections)

updateIn和merge的合并操作，返回一个新值

mergeDeepIn()

getIn(searchKeyPath: Iterable, notSetValue?: any)

返回 查找到的指定路径的值，searchPath是一个数组，每一项可以是字符串(key)可以是数字(index)

hasIn(searchKeyPath)

返回布尔值，是否在指定路径中找到值

---

4. 读取值的方法

get(key / index)

返回读到的值或者undefined

has(key / index)

返回布尔值

includes(value)

返回布尔值，是否包含指定值，类似于contains()

first(notSetValue)

返回集合或列表中的第一个值；如果没有并指定了默认值，返回默认值；否则返回undefined

last(notSetValue)

同first()

find((value: V, key/index: K, iter: this) => boolean,context, notSetValue)

返回 符合条件的第一个值

findLast()

同find，返回的值满足条件的最后一个值

findEntry()， findLastEntry()

返回满足条件的第一个和最后一个键值对

findKey(), findLastKey()

返回满足的条件的第一个，最后一个key值

List的方法

indexOf()

lastIndexOf()

findIndex()

findLastIndex()

---

5. 序列算法

map()

类似于js数组或者对象的map方法

flatMap()

返回新值，类似于data.map(…).flatten(true)

filter((value: T, index/key: number, iter: this) => boolean)

返回满足筛选条件的项组成的新数据

filterNot()

返回值跟filter方法相反

reverse()

返回新值，倒序

sort(comparator?: (valueA: T, valueB: T) => number)

用指定方法排序，跟数组的sort()方法一样

sortBy()

groupBy()

const { List, Map } = require('immutable')
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 } ],
// }

List的concat() 跟数组的concat方法一样

List的zip()，将两个list合并为一个二维list

Map的mapKeys((key: K, value: V, iter: this) => M， context)

返回新map，跟map()方法一样

mapEntries((entry: [K, V], index: number, iter: this) => [KM, VM]， context)

遍历键值对

6. 比较

equals()

返回布尔值 map1.equals(map2)

7.遍历器

keys()

返回键名 key或者index

values()

返回值

entries()

返回键值对[key, value]

8. 拆分子集合的方法

slice(begin?: number, end?: number)

返回begin的值到end前一个的值组成的新集合

rest() 和 butLast()

前者返回除了第一个值的新集合，后者排除最后一个值

skip(number) 和 skipLast(number)

前者从头部计数，跳过number个数值后，之后的值组成的新集合;后者跳过倒数指定数量

skipWhile((value: V, key: K, iter: this) => boolean, context)

从头跳过满足指定条件的项的个数

skipUtil(value: V, key: K, iter: this)

从头开始跳过，直到满足条件的项出现，跳过满足条件的前几个数据，即子集合中包括满足条件的那个数值

take(number)

取前number个数值组成的子集合

takeLast(number), takeWhile(), takeUntil()

用法跟skip系列一样， util不包括满足条件的那一项

9. 分解方法

reduce()

every()

返回布尔值，是否每一项都满足条件

some()

join(‘符号’)

生成用指定符号连接的字符串

isEmpty()

是否是空

count()

返回集合的size

10.转成js数据的方法

toJS()

toJSON()

toArray()

toObject()