这篇文章将讲述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的更多相关文章

  1. 包学会之浅入浅出Vue.js:结业篇(转)

    蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. 在第一篇<包学会之浅入浅出Vu ...

  2. 包学会之浅入浅出Vue.js:升学篇

    包学会之浅入浅出Vue.js:升学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  3. 包学会之浅入浅出Vue.js:开学篇(转)

    包学会之浅入浅出Vue.js:开学篇 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门>书籍的翻译工作.目前专注前端图片优化与新技术的探研. ...

  4. 包学会之浅入浅出Vue.js:结业篇

    在第一篇<包学会之浅入浅出Vue.js:开学篇>和上一篇<包学会之浅入浅出Vue.js:升学篇>的学习中,我们首先了解了Vue环境的搭建以及两个重要思想——路由和组件的学习,通 ...

  5. 包学会之浅入浅出 Vue.js:开学篇

    2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React.Angular.Vue.没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点.面试的时 ...

  6. JQuery插件supersized.js实现背景图片淡入浅出

    淡入浅出的网站背景图片切换,其实是引用了JQuery插件supersized,效果很炫吧.其实这个插件功能很强大,可以做很多图片类的效果.这些需要等待我们自己去探索. 下面是这个效果的代码只有一行: ...

  7. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  8. 大话immutable.js

    为啥要用immutable.js呢.毫不夸张的说.有了immutable.js(当然也有其他实现库)..才能将react的性能发挥到极致!要是各位看官用过一段时间的react,而没有用immutabl ...

  9. React+Immutable.js的心路历程

    这段时间做的项目开发中用的是React+Redux+ImmutableJs+Es6开发,总结了immutable.js的相关使用姿势: Immutable Data 顾名思义是指一旦被创造后,就不可以 ...

随机推荐

  1. Android 弹出对话框Dialog充满屏幕宽度

    final View view = LayoutInflater.from(context).inflate(layoutId, null); final Dialog dialog = new Di ...

  2. phpstudy 安装选择,iis+php组合,如何设置伪静态

    如题. 找了半天,终于找到解决方案了. 需要在服务器上安装 Url rewrite 组件. 服务器是64位则安装:rewrite_2.0_rtw_x64.exe 然后添加 web.config配置文件 ...

  3. 内存泄露:*.hprof

    使用Memory Analyzer tool(MAT)分析内存泄漏 转账地址:http://www.blogjava.net/rosen/archive/2010/06/13/323522.html ...

  4. 方法:一个简单的读取配置文件.properties的工具类 JAVA

    import java.util.ResourceBundle; public class ConfigHelper { private static ConfigHelper instance; p ...

  5. Crystal Report制作使用

    Crystal Report制作使用 本文主要划分为以下六部分: 一.Crystal Report for .NET 的功能 二.Crystal Report总体结构 三.报表数据访问执行模式 四.报 ...

  6. Git push本地代码到新建远程仓库

    快速搞定  1.git init #初始化本地仓库 2.git remote add origin https://git.oschina.net/redArmy/springboot-swagger ...

  7. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  8. SQL SERVER 锁资源问题

    1204: cannot obtain a LOCK resource 在sql server 锁资源的限制基本是自动优化调整.如果调整过参数,可能在系统大批量查询的时候出现以上错误,或者是 alwa ...

  9. flask(1)

    在Python中常用的web框架有flask.Django.tornado # -*- encoding: utf-8 -*- from flask import Flask #建立Flask对象 a ...

  10. 盒子布局、标签特性display、浮动、定位position

    盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...