這篇文章將講述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' ]
好了 就這么關鍵是大家要保持學習的熱情，自己主動去查看官方文檔。。。