js find的用法_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 //falseObject.is(map1, map2) // falseis(map1, map2) // true

数据读取

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

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

Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //trueImmutable.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); //trueImmutable.fromJS([1,2,3,{a:4,b:5}]).includes('2'); //false 不包含字符2Immutable.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}) //falseImmutable.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()//1Immutable.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() //1Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}

数据修改
注：这里对于数据的修改，是对原数据进行操作后的值赋值给一个新的数据，并不会对原数据进行修改，因为Immutable是不可变的数据类型。

设置 set()
作用：设置第一层key、index的值
用法：

set(index: number, value: T): Listset(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。

代码实现：

//Listconst 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//Mapconst { 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, value: any): this
用法与set()一样，只是第一个参数是一个数组，代表要设置的属性所在的位置

删除 delete
作用：用来删除第一层结构中的属性

用法：

delete(index: number): List //Listdelete(key: K): this //MapdeleteIn()

用来删除深层数据，用法参考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()
作用：对对象中的某个属性进行更新，可对原数据进行相关操作

用法：

update(index: number, updater: (value: T) => T): this //Listupdate(key: K, updater: (value: V) => V): this //Map

代码示例：

Listconst list = List([ 'a', 'b', 'c' ])const result = list.update(2, val => val.toUpperCase())///Mapconst aMap = Map({ key: 'value' })const newMap = aMap.update('key', value => value + value)

updateIn()
用法参考setIn

清除 clear()
作用：清除所有数据
用法：clear(): this

代码示例：

Map({ key: 'value' }).clear() //MapList([ 1, 2, 3, 4 ]).clear() // List

总结

以上是生活随笔为你收集整理的js find的用法_React常用库Immutable.js常用API的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。