深度淺出immutable.js

這篇文章將講述immutable.js的基本語法和用法。

1.fromJs()  Deeply converts plain JS objects and arrays to Immutable Maps and Lists. 

immutable.fromJs([1,2,3]) 至關於 immutable.List([1,2,3])  把一個js數組轉化爲immutable的形式

查看list的大小  immutableA.size 或者  immutable.count()

判斷是不是list類型  immutable.List.isList(x)

獲取list的值   var qwe = immutable.fromJs([1,2,3]); var a = qwe.get(1);  獲得的是2

var asd = immutable.fromJs([1,2,[3,4,5]]);  var b = asd.get([2,1]);    我在終端上面試了幾回總報錯好煩呀 。。。

繼續對上面操做

var qwe = asd.set 1, 1;

var qwer = qwe.update 1,(x)=>x+1;

var qwert = qwer.updateIn[2,1],(x)=>x+1;   這應該秒懂吧

查找, find 返回第一個匹配值, filter 返回 List:

immutable.find(() => x>1);

immutable.filter(() => x>1);

Map

immutable.Map({a:1,b:2,c:3}); 或 immutable.fromJS({a:1,b:2,c:3});

判斷 Map 的寫法和 List 判斷相似:

immutable.Map.isMap(x);

獲取map中的數據

immutableObj.get('a');注意引號

經過 getIn 訪問嵌套的 Map 中的樹上:

immutable.getIn(['a','b']);

immutable.set 'a',1;

immutable.setIn ['a','b'],1;

判斷map中的key值是否存在   

immutable.hasKey('a')  是否存在key爲a

immutable.filter((key,value)=>return value ==1) 

獲取key和value的數組形式

immutable.keySeq()    immutable.valueSeq()

下面看一下is比較與原生的區別

var map1  =immutable.Map({a:1,b:2,c:3}); var map2 = immutable.Map({a:1,b:2,c:3});

assert(map1 !== map2); assert(Object.is(map1,map2) === false); assert(immutable.is(map1,map2) === true); 

這回看出來了吧  immutable.is 比較值

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

var qq = immutable.List.of(1,2,3) 記住這種寫法

qq.set(-1,5);   index =-1 這是把最後一個改爲5

qq.delete(2); 刪除index＝2 的元素  This is synonymous with list.splice(index, 1).  是否想起了js數組

qq.insert(1,3);  在index＝1 插入一個元素  list.splice(index,0,value).

clear()  用於清空list  其餘的方法同js數組  pop  push等

qq.update(0,5);  上面已經見過了  修改指定下標的值

var list1 = Immutable.List.of(1,2);

var list2 = list1.push(3,4,5);

var list3 = list2.unshift(0);

var list4 = list1.concat(list2,list3);

assert(list4.size);   concat  也可用於鏈接list 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

merge用於融合

var aa = immutable.map({a:1,b:2,c:3});

var bb = immutable.map({b:3,d:5});

aa.merge(bb);  {a:1,b:3,c:3,d:4}

mergeWith 

var x = Immutable.Map({a: 10, b: 20, c: 30});

var y = Immutable.Map({b: 40, a: 50, d: 60});

x.mergeWith((prev, next) => prev / next, y) // { a: 0.2, b: 0.5, c: 30, d: 60 }

y.mergeWith((prev, next) => prev / next, x) // { b: 2, a: 5, d: 60, c: 30 }  怎麼養看出來了吧 

來幾個實例

var qq = immutable.Map({a:1,b:2,c:3,d:4});

qq.map((val,key)=>key.toUppercase()).join(",");  //A,B,C,D 

var myobject = {a:1,b:2,c:3};

Seq(myobject).map((x)=>x*x).toObject();   //{a:1,b:4,:9}

var deep = immutable.Map({a:1,b:2,c:immutable.list.of(3,4,5)});

deep.object() // {a:1,b:2,c:List[3,4,5]}  轉化爲對象

deep.toArray() // [1,2,list[3,4,5]]  轉化爲數組

json,stringfy(deep) // '{"a"：1,"b":2,"c":[3,4,5]}'  轉化爲json

你們 有空能夠去查下merge和mergedeep的區別  

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

其實immutable.js 語法和原生js差別並不大  正是由於這樣才很差學  很像但又有區別。。。。

官方文檔上的實力也是少得可憐  下面再寫幾個例子吧 

var oddSquare = immutable.sequence.of(1,2,3,4,5,6,7);

oddSquare.filter((x)=>x%2).map((x)=>x*x);

console.log(oddsquare.get(1))  // 9

這是個官方例子  我看英文半天才知道他想說的是什麼  它是一個lazy－seq

.get(1) -->獲得數組下標1 -->須要filter 3次  可是map  就只有一次  

Seq is immutable — Once a Seq is created, it cannot be changed, appended to, rearranged or otherwise modified.

Instead, any mutative method called on a Seq will return a new Seq. 

去百度下這是啥意思   對你頗有幫助

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

再來看一個頗有趣的例子

immutable.range(1,infinity).skip(1000).map((n)=>-n).filter((n)=>n%2==0).take(2).reduce((a,b)=> return a*b,1);

1到無窮大＝》跳過1000個天然數 ＝》每一個書換成負數 ＝》取能被2整除得 ＝》取前2個元素進行reduce   1*（－1002）*(-1004) =1006008

下面

Seq.of('dog','frog','cat','hat','god') .skipWhile(x => x.match(/g/)) // Seq [ 'cat', 'hat', 'god' ]  ？？爲何本身思考

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

 

好了  就這麼關鍵是你們要保持學習的熱情，本身主動去查看官方文檔。。。