immutable學習之常用api

本文主要整理了Immutable.js常用API的使用。

Immutable 是什麼？

關于Immutable的定義，官方文檔是這樣說的：

Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.

簡而言之，Immutable資料就是一旦建立，就不能更改的資料。每當對Immutable對象進行修改的時候，就會傳回一個新的Immutable對象，以此來保證資料的不可變。對于Immutable的好處及介紹，大家可以參考Immutable 詳解及 React 中實踐，這篇文章介紹的很清楚。

因為Immutable的官方文檔有點晦澀難懂，本文隻是用來整理Immutable常用的API的使用，便于使用與查詢，想了解更詳細的内容，請戳這裡~

有不妥的地方歡迎大家指出~

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的使用

1.fromJS()

作用：将一個js資料轉換為Immutable類型的資料。

用法：

fromJS(value, converter)

簡介：value是要轉變的資料，converter是要做的操作。第二個參數可不填，預設情況會将數組準換為List類型，将對象轉換為Map類型，其餘不做操作。

代碼實作：

const obj = Immutable.fromJS({a:'123',b:'234'},function (key, value, path) {
        console.log(key, value, path)
        return isIndexed(value) ? value.toList() : value.toOrderedMap())
    })

2.toJS()

作用：将一個Immutable資料轉換為JS類型的資料。

用法：

value.toJS()

3.is()

作用：對兩個對象進行比較。

用法：

is(map1,map2)

簡介：和js中對象的比較不同，在js中比較兩個對象比較的是位址，但是在Immutable中比較的是這個對象

hashCode

和

valueOf

，隻要兩個對象的

hashCode

相等，值就是相同的，避免了深度周遊，提高了性能。

代碼實作：

import { Map, is } from 'immutable'
const map1 = Map({ a: , b: , c:  })
const map2 = Map({ a: , b: , c:  })
map1 === map2   //false
Object.is(map1, map2) // false
is(map1, map2) // true

4.List 和 Map

建立

List() 和 Map()

作用：用來建立一個新的List/Map對象

用法:

//List

List(): List<any>
List<T>(): List<T>

//Map

Map(): Map<any>
Map<T>(): Map<T>

List.of() 和 Map.of()

作用：建立一個新的包含value的List/Map對象

用法：

List.of<T>(...values: Array<T>): List<T>

Map.of<T>(...values: Object<T>): Map<T>

判斷

List.isList() 和 Map.isMap()

作用：判斷一個資料結構是不是List/Map類型

用法：

List.isList(maybeList: any): boolean

Map.isMap(maybeMap: any): boolean

長度

size

作用：擷取List/Map的長度

資料讀取

get() 、 getIn()

作用：擷取資料結構中的資料

has() 、 hasIn()

作用:判斷是否存在某一個key

用法：

Immutable.fromJS([,,,{a:,b:}]).has('0'); //true
Immutable.fromJS([,,,{a:,b:}]).has('0'); //true
Immutable.fromJS([,,,{a:,b:}]).hasIn([,'b']) //true

includes()

作用：判斷是否存在某一個value

用法：

Immutable.fromJS([,,,{a:,b:}]).includes(); //true
Immutable.fromJS([,,,{a:,b:}]).includes('2'); //false 不包含字元2
Immutable.fromJS([,,,{a:,b:}]).includes(); //false 
Immutable.fromJS([,,,{a:,b:}]).includes({a:,b:}) //false
Immutable.fromJS([,,,{a:,b:}]).includes(Immutable.fromJS({a:,b:})) //true

first() 、 last()

作用：用來擷取第一個元素或者最後一個元素，若沒有則傳回undefined

代碼：

Immutable.fromJS([,,,{a:,b:}]).first()//1
Immutable.fromJS([,,,{a:,b:}]).last()//{a:4,b:5}

Immutable.fromJS({a:,b:,c:{d:,e:}}).first() //1
Immutable.fromJS({a:,b:,c:{d:,e:}}).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([  ]);
// List [ 0 ]
originalList.set(, );
// List [ 0, 1 ]
originalList.set(, 'overwritten');
// List [ "overwritten" ]
originalList.set(, );
// List [ 0, undefined, 2 ]

List().set(, '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()

作用：設定深層結構中某屬性的值

用法：

用法與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(, 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([ , , ,  ]).clear()   // List

List中的各種删除與插入

List對應的資料結構是js中的數組，是以數組的一些方法在Immutable中也是通用的，比如push，pop,shift，unshift，insert。

push()：在List末尾插入一個元素
pop(): 在List末尾删除一個元素
unshift: 在List首部插入一個元素
shift: 在List首部删除一個元素
insert：在List的index處插入元素

代碼實作：

List([ , , , ,  ]).insert(, ) 
//List [ 0, 1, 2, 3, 4, 5 ]
List([ , , ,  ]).push()
// List [ 1, 2, 3, 4, 5 ]
List([ , , ,  ]).pop()
// List[ 1, 2, 3 ]
List([ , , ]).unshift();
// List [ 1, 2, 3, 4 ]
List([ , , , ,  ]).shift();
// List [ 1, 2, 3, 4 ]

List中還有一個特有的方法用法設定List的長度，setSize()

List([]).setSize(2).toJS() //[undefined,undefined]

關于merge

merge

作用：淺合并，新資料與舊資料對比，舊資料中不存在的屬性直接添加，就資料中已存在的屬性用新資料中的覆寫

mergrWith

作用：自定義淺合并，可自行設定某些屬性的值

mergeIn

作用：對深層資料進行淺合并

mergeDeep

作用：深合并，新舊資料中同時存在的的屬性為新舊資料合并之後的資料

mergeDeepIn

作用：對深層資料進行深合并

mergrDeepWith

作用:自定義深合并，可自行設定某些屬性的值

這裡用一段示例徹底搞懂merge，此示例為Map結構，List與Map原理相同

const Map1 = Immutable.fromJS({a:,b:,c:{d:,e:}});
 const Map2 = Immutable.fromJS({a:,b:,c:{e:,f:}});

 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 ;
      }else{
        return newData
      }
    },Map2);
  //Map {a:666,b:222,c:{e:444,f:555}}

序列算法

concat()

作用：對象的拼接，用法與js數組中的concat()相同，傳回一個新的對象。

用法：

const List = list1.concat(list2)

map()

作用：周遊整個對象，對Map/List元素進行操作，傳回一個新的對象。

用法：

Map({a:,b:}).map(val=>*val)
//Map{a:10,b:20}

Map特有的mapKey()

作用：周遊整個對象，對Map元素的key進行操作，傳回一個新的對象。

用法：

Map({a:,b:}).mapKey(val=>val+'l')
//Map{al:10,bl:20}

Map特有的mapEntries()

作用：周遊整個對象，對Map元素的key和value同時進行操作，傳回一個新的對象。Map的map()也可實作此功能。

用法：

Map({a:,b:}).map((key,val)=>{
  return [key+'l',val*]
})
//Map{al:10,bl:20}

過濾 filter

作用：傳回一個新的對象，包括所有滿足過濾條件的元素

用法：

Map({a:,b:}).filter((key,val)=>{
  return val == 
})
//Map{b:2}

還有一個filterNot()方法，與此方法正好相反。

反轉 reverse

作用：将資料的結構進行反轉

代碼示例：

Immutable.fromJS([, , , , ]).reverse();
// List [5,4,3,2,1]
Immutable.fromJS({a:,b:{c:,d:},e:}).recerse();
//Map {e:4,b:{c:2,d:3},a:1}

排序 sort & sortBy

作用：對資料結構進行排序

代碼示例：

///List
Immutable.fromJS([,,,,,]).sort()
// List [1,2,3,4,5,6]
Immutable.fromJS([,,,,,]).sort((a,b)=>{
  if (a < b) { return ; }
  if (a > b) { return ; }
  if (a === b) { return ; }
})
// List [1,2,3,4,5,6]
Immutable.fromJS([{a:},{a:},{a:},{a:}]).sortBy((val,index,obj)=>{
  return val.get('a')
},(a,b)=>{
  if (a < b) { return ; }
  if (a > b) { return ; }
  if (a === b) { return ; }
})
//List  [ {a:3}, {a:2}, {a:4}, {a:1} ]

//Map

Immutable.fromJS( {b:, a: , c: , d:} ).sort()
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:, a: , c: , d:} ).sort((a,b)=>{
  if (a < b) { return ; }
  if (a > b) { return ; }
  if (a === b) { return ; }
})
//Map {b: 1, c: 2, a: 3, d: 5}
Immutable.fromJS( {b:, a: , c: , d:} ).sortBy((value, key, obj)=> {
  return value
})
//Map {b: 1, c: 2, a: 3, d: 5}

分組 groupBy

作用：對資料進行分組

const listOfMaps = List([
  Map({ v:  }),
  Map({ v:  }),
  Map({ v:  }),
  Map({ v:  }),
  Map({ v:  })
])
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 } ],
// }

查找資料

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

作用：和js數組中的方法相同，查找第一個或者最後一個value的index值，找不到則傳回-1

用法：

Immutable.fromJS([,,,]).indexof() //2
Immutable.fromJS([,,,]).lastIndexof() //2

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

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

用法：

Immutable.fromJS([,,,]).findIndex((value,index,array)=>{
  return value% === ;
})   // 1
Immutable.fromJS([,,,]).findLastIndex((value,index,array)=>{
  return index% === ;
})  // 3

find() 、 findLast()

作用：查找滿足條件的元素的value值

用法：

Immutable.fromJS([,,,]).find((value,index,array)=>{
  return value% === ;
})  // 2

Immutable.fromJS([,,,]).findLast((value,index,array)=>{
  return value% === ;
})  // 4

findKey() 、 findLastKey()

作用：查找滿足條件的元素的key值

用法：

Immutable.fromJS([,,,]).findKey((value,index,array)=>{
  return value% === ;
})  // 1

Immutable.fromJS([,,,]).findLastKey((value,index,array)=>{
  return value% === ;
})  // 3

findEntry() 、 findLastEntry()

作用：查找滿足條件的元素的鍵值對 key:value

用法：

Immutable.fromJS([,,,]).findEntry((value,index,array)=>{
  return value% === ;
})  // [1,2]

Immutable.fromJS([,,,]).findLastEntry((value,index,array)=>{
  return value% === ;
})  // [3,4]

keyOf() lastKeyOf()

作用：查找某一個value對應的key值

用法：

Immutable.fromJS([,,,]).keyOf() //1
Immutable.fromJS([,,,]).lastKeyOf() //1

max() 、 maxBy()

作用：查找最大值

用法:

Immutable.fromJS([, , , ]).max() //4

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{
  return value.get('a')
})  //{a:4}

min() 、 minBy()

作用：查找最小值

用法:

Immutable.fromJS([, , , ]).min() //1

Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{
  return value.get('a')
})  //{a:1}

建立子集

slice()

作用：和原生js中數組的slice數組一樣，包含兩個參數，start和end，start代表開始截取的位置，end代表結束的位置，不包括第end的元素。若不包括end，則傳回整個對象，若end為負數，則傳回（start，length-end）對應的資料。若start隻有一個并且為負數，則傳回最後的end個元素。

用法：

Immutable.fromJS([, , , ]).slice(); //[1,2,3,4]
Immutable.fromJS([, , , ]).slice(,); //[1,2]
Immutable.fromJS([, , , ]).slice(); //[3,4]
Immutable.fromJS([, , , ]).slice(,); //[1,2]

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

用法:

Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]

skipWhile()

作用：傳回從第一次傳回false之後的所有元素

Immutable.fromJS([, , , ]).skipWhile(list.skipWhile((value,index,list)=>{
  return value > ;
}))// [1,2,3,4]

skipUntil()

作用：傳回從第一次傳回true之後的所有元素

Immutable.fromJS([, , , ]).skipUntil(list.skipWhile((value,index,list)=>{
  return value > ;
}))// [3,4]

take()

作用：有一個參數n, 傳回前n個元素

用法:

Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]

takeLast()

作用：有一個參數n, 傳回最後n個元素

用法:

Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]

takeWhile()

作用：傳回從第一次傳回false之前的所有元素

Immutable.fromJS([, , , ]).skipWhile(list.takeWhile((value,index,list)=>{
  return value > ;
}))// []

takeUntil()

作用：傳回從第一次傳回true之前的所有元素

Immutable.fromJS([, , , ]).skipUntil(list.takeUntil((value,index,list)=>{
  return value > ;
}))// [1,2]

處理資料

reduce()

作用：和js中數組中的reduce相同,按索引升序的順序處理元素

用法：

Immutable.fromJS([,,,]).reduce((pre,next,index,arr)=>{
  console.log(pre+next)
  return pre+next; 
})
// 3 6 10

reduceRight()

作用：和js中數組中的reduce相同,按索引降序的順序處理元素

用法：

Immutable.fromJS([,,,]).reduceRight((pre,next,index,arr)=>{
  console.log(pre+next)
  return pre+next; 
})
// 7 9 10

every()

作用：判斷整個對象總中所有的元素是不是都滿足某一個條件，都滿足傳回true，反之傳回false。

代碼：

Immutable.fromJS([,,,]).every((value,index,arr)=>{
  return value > 
}) // false

some()

作用：判斷整個對象總中所有的元素是不是存在滿足某一個條件的元素，若存在傳回true，反之傳回false。

代碼：

Immutable.fromJS([,,,]).some((value,index,arr)=>{
  return value > 
}) // true

join()

作用：同js中數組的join方法。把準換為字元串

用法：

Immutable.fromJS([1,2,3,4]).join(',') //1,2,3,4

isEmpty()

作用：判斷是否為空

用法:

Immutable.fromJS([]).isEmpty(); // true
Immutable.fromJS({}).isEmpty(); // true

count()

作用：傳回元素個數，可自定義條件，傳回滿足條件的個數

用法：

const list = Immutable.fromJS([,,,]);
const map = Immutable.fromJS({a:,b:,c:,d:});

list.count((value,index,list)=>{
  return value > ;
})    //2

map.count((value,index,list)=>{
  return value > ;
})    //2

countBy()

作用：與count不同的是，countBy傳回一個對象

用法：

const list = Immutable.fromJS([,,,]);
const map = Immutable.fromJS({a:,b:,c:,d:});

list.countBy((value,index,list)=>{
  return value > ;
} //{false: 2, true: 2}

map.countBy((value,index,list)=>{
  return value > ;
} //{false: 2, true: 2}

immutable學習之常用api

Immutable 是什麼？

Immutable 的幾種資料類型

API的使用

1.fromJS()

2.toJS()

3.is()

4.List 和 Map

建立

判斷

長度

資料讀取

資料修改

List中的各種删除與插入

關于merge

序列算法

查找資料

建立子集

處理資料

繼續閱讀

JAVA中的指針,引用及對象的JAVA中的指針,引用及對象的clone

淺析Java的“克隆”方法

轉：java 克隆

每個學Java的人都應該搞懂

每個java初學者都應該搞懂的問題！

JAVA中必須知道的問題

Java初學者都應該搞懂的六個問題

ZT:Python子產品學習 ---- datetime

Java本質論之關于Java棧與堆的思考

關于Java棧與堆的思考 (轉)

iPhone開發之Deep Copy和Shallow Copy的差別

NSString　記憶體管理問題

iphone NSString與NSMutableString的差別

郁悶，異常的郁悶，呵呵~~~~

Objective-C 2.0 學習筆記十一（Number, Strings, and Collections）

java技巧——deep copy