immutable 入门基础

immutable 基础入门

什么是immutable

  • immutable(不可改变的)

    immutable是一种持久化数据。一旦被创建就不会被修改。修改immutable对象的时候返回新的immutable。但是原数据不会改变。

原理:持久化数据结构

为什么要使用immutable

在Rudux中因为深拷贝对性能的消耗太大了(用到了递归,逐层拷贝每个节点)。

但当你使用immutable数据的时候:只会拷贝你改变的节点,从而达到了节省性能。

总结:immutable的不可变性让纯函数更强大,每次都返回新的immutable的特性让程序员可以对其进行链式操作,用起来更方便。

20181122144653609.gif

immutable的简单实用

初始化

安装: cnpm i immutable -S

本篇文章只介绍一些常用API,以及两种常用的immutable数据结构:Map和List

Map数据结构

immutable.Map():创建一个类似于js中的对象的Map对象

let map = immutable.Map({
    name:"Apple",
    age:19,
    sex:"男"
})

console.log(map); // Map { "name":"Apple", "age":19, "sex":"男" }

操作Map:

  1. map.set

    let map1 = map.set("sign","呜呜")
    console.log(map1); // Map { "name":"Apple", "age":19, "sex":"男", "sign":"呜呜" }
    

    map.setIn

    let map1 = map.setIn(["obj","xxx"],"xxx") // 深层的set
    console.log(map1); // Map { "name":"Apple", "age":19, "sex":"男", "obj":{ "xxx":"xxx" } }
    

    注意:setIn可以深层操作,第一个参数是个数组,数组中第一个元素是操作的对象的key值,第二个元素是value值,如果不需要可以不用。以下的map.deleteIn、map.updateIn、map.getIn同理。

  1. map.delete('a') // 删除 a 的值
    map.deleteIn(['a', 'b']) // 删除 a 中 b 的值
    
  2. map.update()

    参数1:需要更新的值

    参数2:回调函数,返回一个更新后的值

    map.updateIn() 深层更新

    参数1:一个数组,第一个元素是父元素,第二个元素为目标子元素

    参数2:回调函数,参数为目标值的值,返回值为一个更新后的值

    let map1 = map.update('a',function(x){return x+1})
    let map2 = map.updateIn(['a', 'b'],function(x){return x+1})
    
  1. 返回的不是immutable对象了 而是里边定义的正常值

    map.get('a') // {a:1} 得到1。
    map.getIn(['a', 'b']) // {a:{b:2}} 得到2。
    

List数据结构:

immutable.List():创建一个类似于js中的数组的List对象

let list = immutable.List([1,2,3,4,5])
  1. list.push(6)
    
    list.splice(0,0,10)
    

    用法和js的push一样,但是返回值为immutable的List结构,而不是数组

  2. list.splice(1,1)
    
  3. list.splice(1,1,10)
    
  4. list.getIn([0])
    

API

  • merge():合并map对象

    let newMap = map.merge(map1)
    
  • toObject():immutable的map对象转JS对象

    浅转换,只转换最外层

  • toArray():immutable的list对象转JS数组

    浅转换,只转换最外层

  • toJS():immutable的 map对象/list对象 转 JS对象/JS数组

    深转换,全部转换,更耗费性能。

  • Map():JS对象或数组转换成immutable

    浅转换,只转换最外层

  • fromJS():JS对象/JS数组 转换成immutable

    深转换,全部转换,更耗费性能。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352

推荐阅读更多精彩内容

  • 对象的创建与销毁 Item 1: 使用static工厂方法,而不是构造函数创建对象:仅仅是创建对象的方法,并非Fa...
    孙小磊阅读 1,973评论 0 3
  • 本篇只是对Immutable.js的简单介绍,后续会继续分享其具体实践应用。 什么是Immutable Data?...
    桂圆_noble阅读 48,223评论 4 67
  • 3.数组、映射、元组、集合 3.1数组 3.1.1定长数组和变长数组 object ArrayDemo {def ...
    G__yuan阅读 516评论 0 2
  • 本文为非纯原创,部分内容为转载内容,文章结尾附作者名及原文链接。 什么是Immutable Data? Immut...
    公羊无衣阅读 1,460评论 0 9
  • Scala的集合类可以从三个维度进行切分: 可变与不可变集合(Immutable and mutable coll...
    时待吾阅读 5,810评论 0 4