深度浅出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' ]
好了 就这么关键是大家要保持学习的热情,自己主动去查看官方文档。。。
深度浅出immutable.js的更多相关文章
- 包学会之浅入浅出Vue.js:结业篇(转)
蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...
- 包学会之浅入浅出Vue.js:升学篇
包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
- 包学会之浅入浅出Vue.js:开学篇(转)
包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...
- 包学会之浅入浅出Vue.js:结业篇
在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...
- 包学会之浅入浅出 Vue.js:开学篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...
- 包学会之浅入浅出Vue.js:开学篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...
- JQuery插件supersized.js实现背景图片淡入浅出
淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- 大话immutable.js
为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...
随机推荐
- Invalidate,Update与Refresh的区别
在做Windows Forms开发的时候,免不了需要手动刷新窗口,以重绘所需更改的控件,或其它什么的.当出现这类需求时,你有三个选择,使用Invalidate,Update或者Refresh方法. I ...
- MySql学习(MariaDb)
资料 http://www.cnblogs.com/lyhabc/p/3691555.html http://www.cnblogs.com/lyhabc/p/3691555.html MariaDb ...
- Web Essentials之Browser Link
返回Web Essentials功能目录 本篇目录 功能 当Browser Link运行时,会有一个菜单注入到你的网站上,Web Essentials可以使用该菜单上所有可用的一套Browser Li ...
- 分享google的技能的11个级别,大家看看自己到哪个级别了?
you are unfamiliar with the subject area. you can read / understand the most fundamental aspects of ...
- Java虚拟机10:类加载器
类与类加载器 虚拟机设计团队把类加载阶段张的"通过一个类的全限定名来获取此类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这 ...
- tsd-提升IDE对JavaScript智能感知的能力
在编写前端JavaScript代码时,最痛苦的莫过于代码的智能感知(Intelli Sense). 追其根源,是因为JavaScript是一门弱类型的动态语言.对于弱类型的动态语言来说,智能感知就是I ...
- ssl小结
有几篇不错的文章: http://www.cnblogs.com/pen-ink/archive/2011/01/17/1937680.html 这个应该是最简单的示例了. 不过,当两个passwor ...
- 使用OData技术遇到的问题及解决办法
“System.NotSupportedException”类型的未经处理的异常在 Microsoft.Data.Services.Client.dll 中发生 其他信息: 对此 POST 请求的响应 ...
- js笔记——理解js中的call及apply
call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...
- PDO预处理
方法:bool PDOStatement::execute ([ array $input_parameters ] ) 1.PDOStatement::execute不使用参数 01)单个绑定值(P ...