首页  思维导图  详情

Immutable

2017-11-20 19:23:32   8  举报





AI智能生成

Immutable学习笔记导图

作者其他创作

大纲/内容

<h2 data-source-line="9">Immutable 的几种数据类型</h2>

List

有序索引集，类似<code>JavaScript</code>中的<code>Array</code>

Map

无序索引集，类似<code>JavaScript</code>中的<code>Object</code>

OrderedMap

有序的<code>Map</code>，根据数据的<code>set()</code>进行排序

Set

没有重复值的集合

OrderedSet

有序的<code>Set</code>，根据数据的<code>add</code>进行排序

Stack

有序集合，支持使用<code>unshift（）</code>和<code>shift（）</code>添加和删除

Range()

返回一个<code>Seq.Indexed</code>类型的集合，这个方法有三个参数，<code>start</code>表示开始值，默认值为<code>0</code>，<code>end</code>表示结束值，默认为无穷大，<code>step</code>代表每次增大的数值，默认为<code>1</code>.如果<code>start = end</code>,则返回空集合

Repeat()

返回一个<code>vSeq.Indexe</code>类型的集合，这个方法有两个参数，<code>value</code>代表需要重复的值，<code>times</code>代表要重复的次数，默认为无穷大

Record

一个用于生成<code>Record</code>实例的类。类似于<code>JavaScript</code>的<code>Object</code>，但是只接收特定字符串为<code>key</code>，具有默认值

Seq

序列，但是可能不能由具体的数据结构支持

Collection

是构建所有数据结构的基类，不可以直接构建

<h2 data-source-line="24">API使用</h2>

<h3 data-source-line="27">fromJS()</h3>

作用：深度的将数组转换成<code>Immutable Lists</code>,将对象转换成<code>Immutable Maps</code>

<ul data-source-line="31"><li>用法：<code>fromJS(value, converter)</code></li></ul>

值得注意的是，将<code>JS object</code>转换成<code>Immutable Maps</code>时， JS对象的属性永远都是字符串，即使写为没有字符串的简写形式

例子

<pre data-source-line="35"><code>Immutable.fromJS({ a: { b: [1, 2, 3], c: 40 } }); // 得到 Map { "a": Map { "b": List [1, 2, 3], "c": 40 } }</code></pre>

作用：将一个<code>Immutable</code>数据转换为<code>JS</code>类型的数据

<ul data-source-line="56"><li>用法：<code>value.toJS()</code></li></ul>

作用：对两个对象进行比较

例子

<pre data-source-line="68" data-initialized="true" data-gclp-id="37"><code>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 只检测值是否相等</code></pre>

List() 和 Map()

List是有序索引密集的集合，和JS中的Array很像

作用：用来创建一个新的<code>List</code>/<code>Map</code>对象

List.of() 和 Map.of()

作用：创建一个新的包含<code>value</code>的<code>List</code>/<code>Map</code>对象

List.isList() 和 Map.isMap()

作用：判断一个数据结构是不是<code>List</code>/<code>Map</code>类型

size

作用：获取<code>List</code>/<code>Map</code>的长度

get() 、 getIn()

作用：获取数据结构中的数据

has() 、 hasIn()

作用:判断是否存在某一个<code>key</code>

例子

<pre data-source-line="158" data-initialized="true" data-gclp-id="38"><code>Immutable.fromJS([1,2,3,{a:4,b:5}]).has('0'); //true 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</code></pre>

includes()

作用：判断是否存在某一个<code>value</code>

例子

<pre data-source-line="170" data-initialized="true" data-gclp-id="39"><code>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</code></pre>

first() 、 last()

作用：用来获取第一个元素或者最后一个元素，若没有则返回<code>undefined</code>

例子

<pre data-source-line="182" data-initialized="true" data-gclp-id="40"><code>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}</code></pre>

set()

作用：设置第一层<code>key</code>、<code>index</code>的值

语法

<pre data-source-line="200" data-initialized="true" data-gclp-id="41"><code>set(index: number, value: T): List<T> set(key: K, value: V): this</code></pre>

setIn()

作用：设置深层结构中某属性的值

语法

<pre data-source-line="215"><code>setIn(keyPath: Iterable<any>, value: any): this</code></pre>

删除 delete

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

语法

<pre data-source-line="227" data-initialized="true" data-gclp-id="43"><code>delete(index: number): List<T> //List delete(key: K): this //Map</code></pre>

deleteIn()

用来删除深层数据，用法参考setIn

deleteAll() (Map独有，List没有)

作用：用来删除Map中的多个key

语法

deleteAll(keys: Iterable<K>): this

例子

<pre data-source-line="244" data-initialized="true" data-gclp-id="45"><code>const names = Map({ a: "Aaron", b: "Barry", c: "Connor" }) names.deleteAll([ 'a', 'c' ]) // Map { "b": "Barry" }</code></pre>

更新 update()

作用：对对象中的某个属性进行更新，可对原数据进行相关操作

例子

<pre data-source-line="259" data-initialized="true" data-gclp-id="46"><code>////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)</code></pre>

清除 clear()

作用：清除所有数据

例子

<pre data-source-line="275" data-initialized="true" data-gclp-id="47"><code>Map({ key: 'value' }).clear() //Map List([ 1, 2, 3, 4 ]).clear() // Lis</code></pre>

<h4 data-source-line="280">List中的各种删除与插入</h4>

<code>List</code>对应的数据结构是<code>js</code>中的数组，所以数组的一些方法在<code>Immutable</code>中也是通用的，比如<code>push</code>，<code>pop</code>,<code>shift</code>，<code>unshift</code>，<code>insert</code>

<ul data-source-line="285"><li><code>push()</code>：在<code>List</code>末尾插入一个元素</li><li><code>pop()</code>: 在<code>List</code>末尾删除一个元素</li><li><code>unshift</code>: 在<code>List</code>首部插入一个元素</li><li><code>shift</code>: 在<code>List</code>首部删除一个元素</li><li><code>insert</code>：在<code>List</code>的<code>index</code>处插入元素</li></ul>

例子

<pre data-source-line="291" data-initialized="true" data-gclp-id="48"><code>List([ 0, 1, 2, 3, 4 ]).insert(6, 5) //List [ 0, 1, 2, 3, 4, 5 ] List([ 1, 2, 3, 4 ]).push(5) // List [ 1, 2, 3, 4, 5 ] List([ 1, 2, 3, 4 ]).pop() // List[ 1, 2, 3 ] List([ 2, 3, 4]).unshift(1); // List [ 1, 2, 3, 4 ] List([ 0, 1, 2, 3, 4 ]).shift(); // List [ 1, 2, 3, 4 ]</code></pre>

<h4 data-source-line="307">关于merge</h4>

merge

作用：浅合并，新数据与旧数据对比，旧数据中不存在的属性直接添加，就数据中已存在的属性用新数据中的覆盖

mergrWith

作用：自定义浅合并，可自行设置某些属性的值

mergeIn

作用：对深层数据进行浅合并

mergeDeep

作用：深合并，新旧数据中同时存在的的属性为新旧数据合并之后的数据

mergeDeepIn

作用：对深层数据进行深合并

mergrDeepWith

作用:自定义深合并，可自行设置某些属性的值

<ul data-source-line="333"><li>这里用一段示例彻底搞懂merge，此示例为Map结构，List与Map原理相同</li></ul>

<pre data-source-line="335" data-initialized="true" data-gclp-id="49"><code>const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}}); const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}}); 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 666; }else{ return newData } },Map2); //Map {a:666,b:222,c:{e:444,f:555}}</code></pre>

concat()

作用：对象的拼接，用法与js数组中的concat()相同，返回一个新的对象

例子

const List = list1.concat(list2)

map()

作用：遍历整个对象，对<code>Map/List</code>元素进行操作，返回一个新的对象

例子

Map特有的mapKey()

作用：遍历整个对象，对Map元素的key进行操作，返回一个新的对象。

例子

<pre data-source-line="378"><code>Map({a:1,b:2}).mapKey(val=>val+'l') //Map{al:10,bl:20}</code></pre>

Map特有的mapEntries()

作用：遍历整个对象，对Map元素的key和value同时进行操作，返回一个新的对象。Map的map()也可实现此功能

例子

<pre data-source-line="389"><code>Map({a:1,b:2}).map((key,val)=>{ return [key+'l',val*10] }) //Map{al:10,bl:20}</code></pre>

过滤 filter

作用：返回一个新的对象，包括所有满足过滤条件的元素

<ul data-source-line="409"><li>还有一个<code>filterNot()</code>方法，与此方法正好相反</li></ul>

例子

<pre data-source-line="402"><code>Map({a:1,b:2}).filter((key,val)=>{ return val == 2 }) //Map{b:2}</code></pre>

反转 reverse

作用：将数据的结构进行反转

例子

<pre data-source-line="417"><code>Immutable.fromJS([1, 2, 3, 4, 5]).reverse(); // List [5,4,3,2,1] Immutable.fromJS({a:1,b:{c:2,d:3},e:4}).recerse(); //Map {e:4,b:{c:2,d:3},a:1}</code></pre>

排序 sort & sortBy

作用：对数据结构进行排序

例子

<pre data-source-line="428"><code>///List Immutable.fromJS([4,3,5,2,6,1]).sort() // List [1,2,3,4,5,6] Immutable.fromJS([4,3,5,2,6,1]).sort((a,b)=>{ if (a < b) { return -1; } if (a > b) { return 1; } if (a === b) { return 0; } }) // List [1,2,3,4,5,6] Immutable.fromJS([{a:3},{a:2},{a:4},{a:1}]).sortBy((val,index,obj)=>{ return val.get('a') },(a,b)=>{ if (a < b) { return -1; } if (a > b) { return 1; } if (a === b) { return 0; } }) //List [ {a:3}, {a:2}, {a:4}, {a:1} ] //Map Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort() //Map {b: 1, c: 2, a: 3, d: 5} Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort((a,b)=>{ if (a < b) { return -1; } if (a > b) { return 1; } if (a === b) { return 0; } }) //Map {b: 1, c: 2, a: 3, d: 5} Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sortBy((value, key, obj)=> { return value }) //Map {b: 1, c: 2, a: 3, d: 5}</code></pre>

分组 groupBy

作用：对数据进行分组

<pre data-source-line="467"><code>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 } ], // }</code></pre>

indexOf() 、 lastIndexOf 。Map不存在此方法

作用：和js数组中的方法相同，查找第一个或者最后一个<code>value</code>的<code>index</code>值，找不到则返回<code>-1</code>

例子

<pre data-source-line="491"><code>Immutable.fromJS([1,2,3,4]).indexof(3) //2 Immutable.fromJS([1,2,3,4]).lastIndexof(3) //2</code></pre>

findIndex() 、 findLastIndex() 。Map不存在此方法

作用：查找满足要求的元素的index值

例子

<pre data-source-line="501"><code>Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{ return value%2 === 0; }) // 1 Immutable.fromJS([1,2,3,4]).findLastIndex((value,index,array)=>{ return index%2 === 0; }) // 3</code></pre>

find() 、 findLast()

作用：查找满足条件的元素的value值

例子

<pre data-source-line="516"><code>Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{ return value%2 === 0; }) // 2 Immutable.fromJS([1,2,3,4]).findLast((value,index,array)=>{ return value%2 === 0; }) // 4</code></pre>

findKey() 、 findLastKey()

作用：查找满足条件的元素的key值

例子

<pre data-source-line="532"><code>Immutable.fromJS([1,2,3,4]).findKey((value,index,array)=>{ return value%2 === 0; }) // 1 Immutable.fromJS([1,2,3,4]).findLastKey((value,index,array)=>{ return value%2 === 0; }) // 3</code></pre>

findEntry() 、 findLastEntry()

作用：查找满足条件的元素的键值对 <code>key:value</code>

例子

<pre data-source-line="548"><code>Immutable.fromJS([1,2,3,4]).findEntry((value,index,array)=>{ return value%2 === 0; }) // [1,2] Immutable.fromJS([1,2,3,4]).findLastEntry((value,index,array)=>{ return value%2 === 0; }) // [3,4]</code></pre>

keyOf() lastKeyOf()

作用：查找某一个value对应的key值

例子

<pre data-source-line="565"><code>Immutable.fromJS([1,2,3,4]).keyOf(2) //1 Immutable.fromJS([1,2,3,4]).lastKeyOf(2) //1</code></pre>

max() 、 maxBy()

作用：查找最大值

例子

<pre data-source-line="576"><code>Immutable.fromJS([1, 2, 3, 4]).max() //4 Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{ return value.get('a') }) //{a:4}</code></pre>

min() 、 minBy()

作用：查找最小值

例子

<pre data-source-line="590"><code>Immutable.fromJS([1, 2, 3, 4]).min() //1 Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{ return value.get('a') }) //{a:1}</code></pre>

slice()

作用：和原生js中数组的slice数组一样，包含两个参数，start和end，start代表开始截取的位置，end代表结束的位置，不包括第end的元素。若不包括end，则返回整个对象，若end为负数，则返回（start，length-end）对应的数据。若start只有一个并且为负数，则返回最后的end个元素

例子

<pre data-source-line="604"><code>Immutable.fromJS([1, 2, 3, 4]).slice(0); //[1,2,3,4] Immutable.fromJS([1, 2, 3, 4]).slice(0,2); //[1,2] Immutable.fromJS([1, 2, 3, 4]).slice(-2); //[3,4] Immutable.fromJS([1, 2, 3, 4]).slice(0,-2); //[1,2]</code></pre>

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个元素之后剩下的所有元素

<ul data-source-line="633"><li>用法:<code>Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]</code></li></ul>

skipWhile()

作用：返回从第一次返回false之后的所有元素

例子

<pre data-source-line="639"><code>Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.skipWhile((value,index,list)=>{ return value > 2; }))// [1,2,3,4] skipUntil()</code></pre>

take()

作用：有一个参数n, 返回前n个元素

<ul data-source-line="658"><li>用法:<code>Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]</code></li></ul>

takeLast()

作用：有一个参数n, 返回最后n个元素

<ul data-source-line="664"><li>用法:<code>Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]</code></li></ul>

takeWhile()

<ul data-source-line="668"><li>作用：返回从第一次返回false之前的所有元素</li></ul>

例子

<pre data-source-line="670"><code>Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.takeWhile((value,index,list)=>{ return value > 2; }))// [] takeUntil()</code></pre>

reduce()

作用：和<code>js</code>中数组中的<code>reduce</code>相同,按索引升序的顺序处理元素

例子

<pre data-source-line="692"><code>Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{ console.log(pre+next) return pre+next; }) // 3 6 10</code></pre>

reduceRight()

作用：和js中数组中的reduce相同,按索引降序的顺序处理元素

例子

<pre data-source-line="706"><code>Immutable.fromJS([1,2,3,4]).reduceRight((pre,next,index,arr)=>{ console.log(pre+next) return pre+next; }) // 7 9 10</code></pre>

every()

作用：判断整个对象总中所有的元素是不是都满足某一个条件，都满足返回true，反之返回false。

例子

<pre data-source-line="720"><code>Immutable.fromJS([1,2,3,4]).every((value,index,arr)=>{ return value > 2 }) // false</code></pre>

some()

作用：判断整个对象总中所有的元素是不是存在满足某一个条件的元素，若存在返回true，反之返回false。

例子

<pre data-source-line="732"><code>Immutable.fromJS([1,2,3,4]).some((value,index,arr)=>{ return value > 2 }) // true</code></pre>

join()

作用：同js中数组的join方法。把准换为字符串

<ul data-source-line="742"><li>用法：<code>Immutable.fromJS([1,2,3,4]).join(',') //1,2,3,4</code></li></ul>

isEmpty()

<ul data-source-line="746"><li>作用：判断是否为空</li></ul>

用法

<pre data-source-line="750"><code>Immutable.fromJS([]).isEmpty(); // true Immutable.fromJS({}).isEmpty(); // true count()</code></pre>

countBy()

<ul data-source-line="775"><li>作用：与count不同的是，countBy返回一个对象</li></ul>

用法

<pre data-source-line="779"><code>const list = Immutable.fromJS([1,2,3,4]); const map = Immutable.fromJS({a:1,b:2,c:3,d:4}); list.countBy((value,index,list)=>{ return value > 2; } //{false: 2, true: 2} map.countBy((value,index,list)=>{ return value > 2; } //{false: 2, true: 2}</code></pre>