React常用库Immutable.js常用API-今日头条

JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对象简单的引用了原始对象，改变新的对象将影响到原始对象。如 foo={a: 1}; bar=foo; bar.a=2 你会发现此时 foo.a 也被改成了 2。虽然这样做可以节约内存，但当应用复杂后，这就造成了非常大的隐患，Mutable 带来的优点变得得不偿失。为了解决这个问题，一般的做法是使用 shallowCopy（浅拷贝）或 deepCopy（深拷贝）来避免被修改，但这样做造成了 CPU 和内存的浪费。

什么是 Immutable Data？
Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。
请看下面动画：

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 的几种数据类型

List: 有序索引集，类似JavaScript中的Array。
Map: 无序索引集，类似JavaScript中的Object。
OrderedMap: 有序的Map，根据数据的set()进行排序。
Set: 没有重复值的集合。
OrderedSet: 有序的Set，根据数据的add进行排序。
Stack: 有序集合，支持使用unshift（）和shift（）添加和删除。
Range(): 返回一个Seq.Indexed类型的集合，这个方法有三个参数，start表示开始值，默认值为0，end表示结束值，默认为无穷大，step代表每次增大的数值，默认为1.如果start = end,则返回空集合。
Repeat(): 返回一个vSeq.Indexe类型的集合，这个方法有两个参数，value代表需要重复的值，times代表要重复的次数，默认为无穷大。
Record: 一个用于生成Record实例的类。类似于JavaScript的Object，但是只接收特定字符串为key，具有默认值。
Seq: 序列，但是可能不能由具体的数据结构支持。
Collection: 是构建所有数据结构的基类，不可以直接构建。
用的最多就是List和Map，所以在这里主要介绍这两种数据类型的API。

常用API的使用

fromJS()
作用：将一个js数据转换为Immutable类型的数据。
用法：fromJS(value, converter)

简介：value是要转变的数据，converter是要做的操作。第二个参数可不填，默认情况会将数组转换为List类型，将对象转换为Map类型，其余不做操作。

import Immutable from 'immutable'
const obj = Immutable.fromJS({name:'zyb', age:'24'})
console.log(obj)

toJS()
作用：将一个Immutable数据转换为JS类型的数据。
用法：value.toJS()

import Immutable from 'immutable'

const obj = Immutable.fromJS({name:'zyb', age:'22'})
console.log(obj.toJS()) // {name:'zyb', age:'22'}

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

数据读取

get() 、 getIn()
作用：获取数据结构中的数据

has() 、 hasIn()
作用:判断是否存在某一个key
用法：

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的值
用法：

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([ 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

//////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()
作用：设置深层结构中某属性的值
用法：
setIn(keyPath: Iterable<any>, value: any): this
用法与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(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

React常用库Immutable.js常用API

头条热榜

精彩视频