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

我会带着你远行 2024-04-19 12:08 8阅读 0赞

# 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