#7 Immutable.js初步學(xué)習(xí)

初步閱讀 Immutable.js官網(wǎng)文檔怀各, 作出如下記錄昧旨,以便查閱。

1.fromJS()

深度的將數(shù)組轉(zhuǎn)換成Immutable Lists,將對象轉(zhuǎn)換成Immutable Maps请祖。

語法:

fromJS(json: any, reviver?: (k: any, v: Iterable<any, any>) => any): any

reviver 為一個可選參數(shù)

示例:

Immutable.fromJS({
  a: {
    b: [1, 2, 3],
    c: 40
  }
});
// 得到
Map {
  "a": Map {
    "b": List [1, 2, 3],
    "c": 40
  }
}   

值得注意的是您机,將JS object轉(zhuǎn)換成Immutable Maps時穿肄, JS對象的屬性永遠(yuǎn)都是字符串,即使寫為沒有字符串的簡寫形式

var obj = {1: "one"};
var map = Map(obj);
map.get("1"); // "one"
map.get(1);   // undefined

2.is()

用于檢測值的相等性往产,注意這和Object.is()的區(qū)別

語法:

is(first: any, second: any): boolean

示例:

var map1 = Immutable.Map({a: 1, b: 1});
var map2 = Immutable.Map({a: 1, b: 1});
map1 !== map2; // true
Object.is(map1, map2); // false
Immutable.is(map1, map2); // true 只檢測值是否相等

另外注意這個差別:

Immutable.is(0, -0); // true
Object.is(0, -0); // false

List

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

定義:

class List<T> extends Collection.Indexed<T>

1.靜態(tài)方法

1.List.isList()

判斷一個集合是否為一個List集合

List.isList(maybeList: any): boolean

示例:

const plainArr = [1, 2, 3];
const listFromPlainArray = List(plainArr);
List.isList(listFromPlainArray); // true
listFromPlainArray.toJS(); // [1, 2, 3]

2.List.of()

創(chuàng)建一個新的List,并且包含values

List.of<T>(...values: T[]): List<T>

實(shí)例:

List.of(1, 2, 3, 4);
var myList = List.of({x: 1}, 2, [3]);
myList.toJS(); // [ {x: 1}, 2, [3] ]

1.Deep persistent changes

setIn()

keyPath的地方設(shè)置新的value,如果對應(yīng)的keyPath中不存在keys,則返回一個新的immutable Map

語法:

setIn(keyPath: Array<any>, value: any): List<T>
setIn(keyPath: Iterable<any, any>, value: any): List<T>

// setIn([index(, otherIndex)], value)
表示對應(yīng)的索引位置設(shè)置值

示例:

Immutable.fromJS([0, 1, 3, [5, 7]]).setIn([3, 2], 9).toJS(); // [0, 1, 3, [5, 7, 9]]

2.creating subsets

rest()

返回一個新的可循環(huán)的實(shí)體某宪,除了第1個

var myList = List.of(1, 2, 3);
myList.rest().toJS(); // [2, 3]

butLast()

和上面的正好相反仿村,除去最后一個

myList.butLast().toJS(); // [1, 2]

skip()

跳過的數(shù)量

myList.skip(2).toJS(); // [3]

skipWhile()

predicate函數(shù)開始返回 false時后面的實(shí)體

語法:

skipWhile(
  predicate: (value: T, key: number, iter: Iterable<number, T>) => boolean,
  context?: any
): Iterable<number, T>

示例:

Seq.of('dog', 'frog', 'cat', 'hat', 'god')
  .skipWhile(x => x.match(/g/));

// 到 'cat'時返回false, 所以返回
// Seq [ 'cat', 'hat', 'god']

skipUntil()

predicate函數(shù)開始返回 true時后面的實(shí)體

實(shí)例:

Seq.of('dog', 'frog', 'cat', 'hat', 'god')
  .skipUntil(x => x.match(/hat/))
// Seq ['hat', 'god']

zip()

使用默認(rèn)的 zipper 函數(shù)對2個集合進(jìn)行處理

var a = Seq.of(1, 2, 3, 4, 5);
var b = Seq.of('a', 'b', 'c');

var c = a.zip(b);
// Seq [ [1, 'a'], [2, 'b'], [3, 'c'] ]
// 多的部分省略掉了

zipWith()

和上面不同的時,這個可以自定義 zipper 函數(shù)兴喂, 按照自己的邏輯進(jìn)行處理集合

var a = Seq.of(1, 2, 3);
var b = Seq.of(4, 5, 6);
// (x, y) => x + y 表示的是zipper函數(shù)
// b 表示的是第2個集合
var c = a.zipWith((x, y) => x + y, b);
// Seq [5, 7, 9]

Map

Map集合和List集合的靜態(tài)方法基本相似蔼囊,Map.isMap() | Map.of()焚志,這個是針對對象而言

update()

如果存在相應(yīng)的key,則通過 updater 對其進(jìn)行更新,并返回更新后的新的Map畏鼓;如果沒有定義key,則更新的為Map自身

3種語法:

update(updater: (value: Map<K, V>) => Map<K, V>): Map<K, V>
update(key: K, updater: (value: V) => V): Map<K, V>
update(key: K, notSetValue: V, updater: (value: V) => V): Map(K, V)

示例:

#1 不設(shè)置key,對整個Map集合進(jìn)行更新
// 相當(dāng)于 map.set(key, updater(map.get(key, notSetValue)))
const originalMap = Immutable.Map({
  key: 'value',
  subObject: { subKey: 'subValue' }
});

const newMap = originalMap.update(map => {
  return Immutable.Map(map.get('subObject'))
});
newMap.toJS(); // { subKey: 'subValue'}

#2 對存在的key進(jìn)行更新
const newMap = originalMap.update('key', value => value + value);
newMap.toJS(); 
// {
     key: 'valuevalue', 
     subObject: { subkey: 'subValue'}
   }

#3 對不存在的key,進(jìn)行更新
var originalMap = Immutable.Map({
  key: 'value'
});
var newMap = originalMap.update('noKey', 'noValue', value => value + value);
newMap.toJS();
// {
     key: 'value',
     noKey: 'no valueno value'
   }

mergeDeep

當(dāng)2個集合產(chǎn)生了沖突酱酬, 將遞歸合并嵌套的數(shù)據(jù)

示例:

var x = Immutable.fromJS({
  a: { x: 10, y: 10 },
  b: { x: 20, y: 50 }
});
var y = Immutable.fromJS({
  a: { x: 2 },
  b: { y: 5 },
  c: { z: 3 }
});
x.mergeDeep(y);
// 結(jié)果
Map {
  a: { x: 2, y: 10 },
  b: { x:20, y: 5 },
  c: { z: 3 }
}

setIn()

根據(jù) keyPath 來設(shè)置 value, 如果對應(yīng)的 keyPath不存在,則創(chuàng)建新的 key

示例:

#1 'keyPath' 存在的情況
const originalMap = Immutable.fromJS({
  subObject: {
    subKey: 'subValue',
    subSubObject: {
      subSubKey: 'subSubValue'
    }
  }
});

const newMap = originalMap.set(['subObject', 'subSubObject', 'subSubKey'], 'great');
newMap.toJS();
subObject: {
    subKey: 'subValue',
    subSubObject: {
      subSubKey: 'great'
    }
  }

#2 'keyMap'不存在的情況
var map = Immutable.fromJS({
  a: 'hello',
  b: {
    x: 12,
    y: 34
  }
});
var newMap = map.setIn(
  ['b', 'z'],
  50
);
newMap.toJS();
{
  a: 'hello',
  b: {
    x: 12,
    y: 34,
    z: 50
  }
}

Transient changes

1.withMutation

如果想應(yīng)用一系列可變操作產(chǎn)生一個新的immutable Map,可以使用 withMutation 來產(chǎn)生一個中間可變Map云矫。只有 set ,merge 方法能用在中間可變的集合中

示例:

var map1 = Immutable.Map();
var map2 = map1.withMutation(map => {
  map.set('a', 1).set('b', 2).set('c', 3)
});
map2.toJS();
{
  a: 1,
  b: 2,
  c: 3
}

Range()

返回一個 Seq 集合膳沽, 從 start (inclusive, 默認(rèn)是0)end (exclusive让禀, 默認(rèn)是infinity), by step(默認(rèn)值是1).當(dāng) start === end 時挑社,返回一個空的range

語法:

Range(start?: number, end?: number, step?: number): Seq.Indexed<number>

示例:

Range(); // Seq [0, 1, 2....]
Range(10, 15); // Seq [10, 11, 12, 13, 14]
Range(10, 30, 5);  // Seq [10, 15, 20, 25]
Range(30, 10, 5); // Seq [30, 25, 20, 15]
Range(30, 30); Seq []

Iterable

Iterable 是一系列能夠迭代的鍵值對,是immutable.js中所有集合的基類巡揍,從而使得所有的集合都擁有可迭代的方法(比如map, filter)

class Iterable<K, V>

靜態(tài)方法

Iterable.isIterable()

示例:

var Iterable = Immutable.Iterable;

Iterable.isIterable([]); // false
Iterable.isIterable({}); // false
Iterable.isIterable(Immutable.Map()); // ture
Iterable.isIterable(Immutable.List()); // ture
Iterable.isIterable(Immutable.Seq()); // ture
Iterable.isIterable(Immutable.Stack()); // ture

Collection

Collection對實(shí)體數(shù)據(jù)結(jié)構(gòu)是個抽象基類痛阻,不能夠直接的構(gòu)建

class Collection<K, V> extends Iterable<K, V>

總結(jié)

immutable.js 對于數(shù)據(jù)的操作都是同個集合的方式來完成。對于數(shù)據(jù)無非就是增刪改查腮敌, immutable.js最大的優(yōu)點(diǎn)就是不會改變原有的數(shù)據(jù)阱当,都是通過返回新的集合類型來完成的。另外提供了大量的方法來操作數(shù)據(jù)糜工。

比較最要的集合有List, Map弊添。然后就是幾種方法,比如對于集合和常規(guī)的JS對象數(shù)組的轉(zhuǎn)換捌木,會使用到 Immutable.fromJS() | Immutable.toJS()表箭。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市钮莲,隨后出現(xiàn)的幾起案子免钻,更是在濱河造成了極大的恐慌,老刑警劉巖崔拥,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件极舔,死亡現(xiàn)場離奇詭異,居然都是意外死亡链瓦,警方通過查閱死者的電腦和手機(jī)拆魏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慈俯,“玉大人渤刃,你說我怎么就攤上這事√欤” “怎么了卖子?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長刑峡。 經(jīng)常有香客問我洋闽,道長玄柠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任诫舅,我火速辦了婚禮羽利,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘刊懈。我一直安慰自己这弧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布虚汛。 她就那樣靜靜地躺著当宴,像睡著了一般。 火紅的嫁衣襯著肌膚如雪泽疆。 梳的紋絲不亂的頭發(fā)上户矢,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機(jī)與錄音殉疼,去河邊找鬼梯浪。 笑死,一個胖子當(dāng)著我的面吹牛瓢娜,可吹牛的內(nèi)容都是我干的挂洛。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼眠砾,長吁一口氣:“原來是場噩夢啊……” “哼虏劲!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起褒颈,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤柒巫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后谷丸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體堡掏,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年刨疼,在試婚紗的時候發(fā)現(xiàn)自己被綠了泉唁。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡揩慕,死狀恐怖亭畜,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情迎卤,我是刑警寧澤拴鸵,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響宝踪,放射性物質(zhì)發(fā)生泄漏侨糟。R本人自食惡果不足惜碍扔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一瘩燥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧不同,春花似錦厉膀、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至百新,卻和暖如春企软,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背饭望。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工仗哨, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人铅辞。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓厌漂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親斟珊。 傳聞我的和親對象是個殘疾皇子苇倡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容