精华内容
下载资源
问答
  • 什么是Immutable Data Immutable Data是指一旦被创造后,就不可以被改变的数据。 通过使用Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发。 js中的Immutable Data 在...
  • immutable for persistent data fetch for request / jQuery for ajax Webpack for building tool 项目说明 本项目来自文章 原文章没有提供完整的实现代码,本项目是原文章的完整实现 摘苹果的ajax请求地址使用的...
  • 主要介绍了基于 Immutable.js 实现撤销重做功能及一些需要注意的地方,需要的朋友可以参考下
  • 如果您使用的是Immutable.js的库,则会自动为您完成此操作,因为该库提供的结构不允许您对其进行突变(只要您在这些集合中没有可变的东西作为值) )。 但是,如果您使用常规对象和数组,则应注意避免突变。 如何...
  • 这可以看作是React Immutability Helpers和Immutable.js的一种更简单,更直观的替代方法。 变更日志 安装 npm install object-path-immutable --save 快速使用 下面,设置属性而不修改原始对象。 它将最大限度地...
  • 什么是immutable Data? Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure...
  • 带有 immutable.js 的 Chrome 扩展 我们在后台页面中有纯 JS 对象: var data = { item1: { name: 'Name 1' }, item2: { name: 'Name 2' } }; 在 popup.js 脚本中,我们想要获取这个对象并创建它的不可变...
  • 简单介绍Immutable.js的一个ppt,主要用于技术分享,内容为imuutabe常用的数据类型和常用的基础api,还有immutable的原理、优缺点的分析。
  • 我厌倦了看到的React.PropTypes.instanceOf(Immutable.List)或React.PropTypes.instanceOf(Immutable.Map)作为PropTypes为应指定部件Immutable.List的东西,或者一个Immutable.Map包含一些按键。 除非您要使用Flow,...
  • @ sabaki / immutable-gametree 不可变的游戏树数据类型。 安装 使用npm进行安装: $ npm install @sabaki/immutable-gametree 用法 const GameTree = require ( '@sabaki/immutable-gametree' ) let tree = new...
  • 使用 Immutable.js 和纯 FB Flux 以 ES6 语法响应 0.13 可以从应用程序创建多个实例。 同构应用程序。 (服务器端和客户端也渲染) 怎么跑 作为同构应用 npm install将在postinstall构建捆绑的客户端代码npm start...
  • 主要为大家详细介绍了react性能优化达到最大化的方法,一步一步优化react性能的过程,告诉大家使用immutable.js的必要性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • immutable

    2019-05-09 12:31:48
    本篇只是对Immutable.js的简单介绍,后续会继续分享其具体实践应用。 immutable.jpeg 什么是Immutable Data? Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler ...

    本篇只是对Immutable.js的简单介绍,后续会继续分享其具体实践应用。

    immutable.jpeg

    什么是Immutable Data?

    Immutable data encourages pure functions (data-in, data-out) and lends itself to much simpler application development and enabling techniques from functional programming such as lazy evaluation.
    – 官方文档对其描述

    Immutable Data 就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。请看下面动画:

    结构共享

    Immutable的优缺点一览
    优点

    1. 降低 Mutable 带来的复杂度
      共享的可变状态是万恶之源,举个简单的例子就是js中的引用赋值:
      var obj = { a: 1 };
      var copy_obj = obj;
      copy_obj.a = 2;
      console.log(obj.a); // 2

    引用赋值虽然可以节省内存,但当应用复杂之后,可变状态往往会变成噩梦,通常一般的做法是使用shallowCopy或者deepCopy来避免被修改,但这样造成了CPU和内存的消耗,不过Immulate可以很好地解决这些问题。
    2. 节省内存空间
    上面提到了结构共享,Immutable.js 使用这种方式会尽量复用内存,甚至以前使用的对象也可以再次被复用。没有被引用的对象会被垃圾回收。
    import { Map } from ‘immutable’;
    let a = Map({
    select: ‘users’,
    filter: Map({ name: ‘Cam’ })
    })
    let b = a.set(‘select’, ‘people’);

    a === b; // false
    a.get(‘filter’) === b.get(‘filter’); // true

    上面 a 和 b 共享了没有变化的 filter 节点。
    3. Undo/Redo,Copy/Paste,随意穿越!
    因为每次数据都是不一样的,只要把这些数据放到一个数组里储存起来,想回退到哪里就拿出对应数据即可,很容易开发出撤销重做这种功能。
    4. 拥抱函数式编程
    Immutable(持久化数据结构)本身就是函数式编程中的概念。函数式编程关心数据的映射,命令式编程关心解决问题的步骤,纯函数式编程比面向对象更适用于前端开发。因为只要输入一致,输出必然一致,这样开发的组件更易于调试和组装。
    缺点
    抛开学习成本和额外引入的资源文件这些不说,我们来看看使用过程中有哪些不爽的地方。

    1. 容易与原生对象混
      主要是Immutable的API设计的和原生对象类似,容易混淆操作。例如其中Map和List的操作:
      // Immutable
      const map = Map({ a: 1, b: 2 });
      const list = List([1,2,3]);

    // 原生js
    const obj = { a: 1, b: 2 };
    const arry = [1,2,3];

    // 取值方式对比
    console.log(map.get(‘a’));
    console.log(list.get(0));
    console.log(obj.a);
    console.log(arry[0]);

    Immutable.js简介
    Facebook 工程师 Lee Byron 花费 3 年时间打造,与 React 同期出现,但没有被默认放到 React 工具集里(React 提供了简化的 Helper)。它内部实现了一套完整的 Persistent Data Structure,还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量与 Object 或 Array 类似。

    immutablejs-getters-and-setters-everywhere.jpg

    Immutable.js 的几种数据类型

    List: 有序索引集,类似JavaScript中的Array。
    Map: 无序索引集,类似JavaScript中的Object。
    OrderedMap: 有序的Map,根据数据的set()进行排序。
    Set: 没有重复值的集合。
    OrderedSet: 有序的Set,根据数据的add进行排序。
    Stack: 有序集合,支持使用unshift()和shift()添加和删除。
    Record: 一个用于生成Record实例的类。类似于JavaScript的Object,但是只接收特定字符串为key,具有默认值。
    Seq: 序列,但是可能不能由具体的数据结构支持。
    Collection: 是构建所有数据结构的基类,不可以直接构建。

    用的最多就是List和Map,所以在这里主要介绍这两种数据类型的API。
    Immutable.js 的常用API
    fromJS()
    作用:将一个js数据转换为Immutable类型的数据
    用法:fromJS(value, converter)
    简介:value是要转变的数据,converter是要做的操作。第二个参数可不填,默认情况会将数组准换为List类型,将对象转换为Map类型,其余不做操作
    代码实现:
    const obj = Immutable.fromJS({a:‘123’,b:‘234’},function (key, value, path) {
    console.log(key, value, path)
    return isIndexed(value) ? value.toList() : value.toOrderedMap())
    })

    toJS()
    作用:将一个Immutable数据转换为JS类型的数据
    用法:value.toJS()
    is()
    作用:对两个对象进行比较
    用法:is(map1,map2)
    简介:和js中对象的比较不同,在js中比较两个对象比较的是地址,但是在Immutable中比较的是这个对象hashCode和valueOf,只要两个对象的hashCode相等,值就是相同的,避免了深度遍历,提高了性能
    代码实现:
    import { Map, is } from ‘immutable’
    const map1 = Map({ a: 1, b: 1, c: 1 })
    const map2 = Map({ a: 1, b: 1, c: 1 })
    map1 === map2 //false
    Object.is(map1, map2) // false
    is(map1, map2) // true

    List() 和 Map()
    作用:用来创建一个新的List/Map对象
    用法:
    //List
    Immutable.List(); // 空List
    Immutable.List([1, 2]);

    //Map
    Immutable.Map(); // 空Map
    Immutable.Map({ a: ‘1’, b: ‘2’ });

    List.isList() 和 Map.isMap()
    作用:判断一个数据结构是不是List/Map类型
    用法:
    List.isList([]); // false
    List.isList(List()); // true

    Map.isMap({}) // false
    Map.isMap(Map()) // true

    size
    作用:属性,获取List/Map的长度,等同于ImmutableData.count();
    get() 、 getIn()
    作用:获取数据结构中的数据
    //获取List索引的元素
    ImmutableData.get(0);

    // 获取Map对应key的value
    ImmutableData.get(‘a’);

    // 获取嵌套数组中的数据
    ImmutableData.getIn([1, 2]);

    // 获取嵌套map的数据
    ImmutableData.getIn([‘a’, ‘b’]);

    has() 、 hasIn()
    作用:判断是否存在某一个key
    用法:
    Immutable.fromJS([1,2,3,{a:4,b:5}]).has(‘0’); //true
    Immutable.fromJS([1,2,3,{a:4,b:5}]).has(‘0’); //true
    Immutable.fromJS([1,2,3,{a:4,b:5}]).hasIn([3,‘b’]) //true

    includes()
    作用:判断是否存在某一个value
    用法:
    Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(2); //true
    Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(‘2’); //false 不包含字符2
    Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(5); //false
    Immutable.fromJS([1,2,3,{a:4,b:5}]).includes({a:4,b:5}) //false
    Immutable.fromJS([1,2,3,{a:4,b:5}]).includes(Immutable.fromJS({a:4,b:5})) //true

    first() 、 last()
    作用:用来获取第一个元素或者最后一个元素,若没有则返回undefined
    代码:
    Immutable.fromJS([1,2,3,{a:4,b:5}]).first()//1
    Immutable.fromJS([1,2,3,{a:4,b:5}]).last()//{a:4,b:5}

    Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //1
    Immutable.fromJS({a:1,b:2,c:{d:3,e:4}}).first() //{d:3,e:4}

    数据修改
    注:这里对于数据的修改,是对原数据进行操作后的值赋值给一个新的数据,并不会对原数据进行修改,因为Immutable是不可变的数据类型。
    设置 set()
    作用:设置第一层key、index的值
    用法:
    const originalList = List([ 0 ]);
    // List [ 0 ]
    originalList.set(1, 1);
    // List [ 0, 1 ]
    originalList.set(0, ‘overwritten’);
    // List [ “overwritten” ]
    originalList.set(2, 2);
    // List [ 0, undefined, 2 ]

    List().set(50000, ‘value’).size;
    // 50001

    const originalMap = Map()
    const newerMap = originalMap.set(‘key’, ‘value’)
    const newestMap = newerMap.set(‘key’, ‘newer value’)

    originalMap
    // Map {}
    newerMap
    // Map { “key”: “value” }
    newestMap
    // Map { “key”: “newer value” }

    List在使用的时候,将index为number值设置为value。Map在使用的时候,将key的值设置为value。
    在List中使用时,若传入的number为负数,则将index为size+index的值设置为value,例,若传入-1,则将size-1的值设为value。若传入的number的值超过了List的长度,则将List自动补全为传入的number的值,将number设置为value,其余用undefined补全。注:跟js中不同,List中不存在空位,[,],List中若没有值,则为undefined。
    setIn()
    作用:设置深层结构中某属性的值
    用法:
    const originalMap = Map({
    subObject: Map({
    subKey: ‘subvalue’,
    subSubObject: Map({
    subSubKey: ‘subSubValue’
    })
    })
    })

    const newMap = originalMap.setIn([‘subObject’, ‘subKey’], ‘ha ha!’)
    // Map {
    // “subObject”: Map {
    // “subKey”: “ha ha!”,
    // “subSubObject”: Map { “subSubKey”: “subSubValue” }
    // }
    // }

    const newerMap = originalMap.setIn(
    [‘subObject’, ‘subSubObject’, ‘subSubKey’],
    ‘ha ha ha!’
    )
    // Map {
    // “subObject”: Map {
    // “subKey”: “subvalue”,
    // “subSubObject”: Map { “subSubKey”: “ha ha ha!” }
    // }
    // }

    用法与set()一样,只是第一个参数是一个数组,代表要设置的属性所在的位置
    删除 delete
    作用:用来删除第一层结构中的属性
    用法:
    // List
    List([ 0, 1, 2, 3, 4 ]).delete(0);
    // List [ 1, 2, 3, 4 ]

    // Map
    const originalMap = Map({
    key: ‘value’,
    otherKey: ‘other value’
    })
    // Map { “key”: “value”, “otherKey”: “other value” }
    originalMap.delete(‘otherKey’)
    // Map { “key”: “value” }

    deleteIn()
    用来删除深层数据,用法参考setIn
    deleteAll() (Map独有,List没有)
    作用:用来删除Map中的多个key
    用法:deleteAll(keys: Iterable): this
    代码示例:
    const names = Map({ a: “Aaron”, b: “Barry”, c: “Connor” })
    names.deleteAll([ ‘a’, ‘c’ ])
    // Map { “b”: “Barry” }

    更新 update()
    作用:对对象中的某个属性进行更新,可对原数据进行相关操作
    用法:
    List
    const list = List([ ‘a’, ‘b’, ‘c’ ])
    const result = list.update(2, val => val.toUpperCase())

    ///Map
    const aMap = Map({ key: ‘value’ })
    const newMap = aMap.update(‘key’, value => value + value)

    updateIn()
    用法参考setIn
    清除 clear()
    作用:清除所有数据
    用法:clear(): this
    代码示例:
    Map({ key: ‘value’ }).clear() //Map
    List([ 1, 2, 3, 4 ]).clear() // List
    List中的各种删除与插入
    List对应的数据结构是js中的数组,所以数组的一些方法在Immutable中也是通用的,比如push,pop,shift,
    unshift,insert。

    push()
    在List末尾插入一个元素
    pop()
    在List末尾删除一个元素
    unshift
    在List首部插入一个元素
    shift
    在List首部删除一个元素
    insert
    在List的index处插入元素
    代码实现:
    List([ 0, 1, 2, 3, 4 ]).insert(6, 5)
    //List [ 0, 1, 2, 3, 4, 5 ]
    List([ 1, 2, 3, 4 ]).push(5)
    // List [ 1, 2, 3, 4, 5 ]
    List([ 1, 2, 3, 4 ]).pop()
    // List[ 1, 2, 3 ]
    List([ 2, 3, 4]).unshift(1);
    // List [ 1, 2, 3, 4 ]
    List([ 0, 1, 2, 3, 4 ]).shift();
    // List [ 1, 2, 3, 4 ]

    List中还有一个特有的方法用法设置List的长度,setSize()
    List([]).setSize(2).toJS() //[undefined,undefined]

    关于merge
    merge
    作用:浅合并,新数据与旧数据对比,旧数据中不存在的属性直接添加,就数据中已存在的属性用新数据中的覆盖
    mergrWith
    作用:自定义浅合并,可自行设置某些属性的值
    mergeIn
    作用:对深层数据进行浅合并
    mergeDeep
    作用:深合并,新旧数据中同时存在的的属性为新旧数据合并之后的数据
    mergeDeepIn
    作用:对深层数据进行深合并
    mergrDeepWith
    作用:自定义深合并,可自行设置某些属性的值
    这里用一段示例彻底搞懂merge,此示例为Map结构,List与Map原理相同
    const Map1 = Immutable.fromJS({a:111,b:222,c:{d:333,e:444}});
    const Map2 = Immutable.fromJS({a:111,b:222,c:{e:444,f:555}});

    const Map3 = Map1.merge(Map2);
    //Map {a:111,b:222,c:{e:444,f:555}}
    const Map4 = Map1.mergeDeep(Map2);
    //Map {a:111,b:222,c:{d:333,e:444,f:555}}
    const Map5 = Map1.mergeWith((oldData,newData,key)=>{
    if(key === ‘a’){
    return 666;
    }else{
    return newData
    }
    },Map2);
    //Map {a:666,b:222,c:{e:444,f:555}}

    序列算法
    concat()
    作用:对象的拼接,用法与js数组中的concat()相同,返回一个新的对象。
    用法:const List = list1.concat(list2)
    map()
    作用:遍历整个对象,对Map/List元素进行操作,返回一个新的对象。
    用法:
    Map({a:1,b:2}).map(val=>10*val)
    //Map{a:10,b:20}

    Map特有的mapKey()
    作用:遍历整个对象,对Map元素的key进行操作,返回一个新的对象。
    用法:
    Map({a:1,b:2}).mapKey(val=>val+‘l’)
    //Map{al:10,bl:20}

    Map特有的mapEntries()
    作用:遍历整个对象,对Map元素的key和value同时进行操作,返回一个新的对象。Map的map()也可实现此功能。
    用法:
    Map({a:1,b:2}).map((key,val)=>{
    return [key+‘l’,val*10]
    })
    //Map{al:10,bl:20}

    过滤 filter
    作用:返回一个新的对象,包括所有满足过滤条件的元素
    用法:
    Map({a:1,b:2}).filter((key,val)=>{
    return val == 2
    })
    //Map{b:2}

    还有一个filterNot()方法,与此方法正好相反。
    反转 reverse
    作用:将数据的结构进行反转
    代码示例:
    Immutable.fromJS([1, 2, 3, 4, 5]).reverse();
    // List [5,4,3,2,1]
    Immutable.fromJS({a:1,b:{c:2,d:3},e:4}).recerse();
    //Map {e:4,b:{c:2,d:3},a:1}

    排序 sort & sortBy
    作用:对数据结构进行排序
    代码示例:
    ///List
    Immutable.fromJS([4,3,5,2,6,1]).sort()
    // List [1,2,3,4,5,6]
    Immutable.fromJS([4,3,5,2,6,1]).sort((a,b)=>{
    if (a < b) { return -1; }
    if (a > b) { return 1; }
    if (a === b) { return 0; }
    })
    // List [1,2,3,4,5,6]
    Immutable.fromJS([{a:3},{a:2},{a:4},{a:1}]).sortBy((val,index,obj)=>{
    return val.get(‘a’)
    },(a,b)=>{
    if (a < b) { return -1; }
    if (a > b) { return 1; }
    if (a === b) { return 0; }
    })
    //List [ {a:3}, {a:2}, {a:4}, {a:1} ]

    //Map

    Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort()
    //Map {b: 1, c: 2, a: 3, d: 5}
    Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sort((a,b)=>{
    if (a < b) { return -1; }
    if (a > b) { return 1; }
    if (a === b) { return 0; }
    })
    //Map {b: 1, c: 2, a: 3, d: 5}
    Immutable.fromJS( {b:1, a: 3, c: 2, d:5} ).sortBy((value, key, obj)=> {
    return value
    })
    //Map {b: 1, c: 2, a: 3, d: 5}

    分组 groupBy
    作用:对数据进行分组
    const listOfMaps = List([
    Map({ v: 0 }),
    Map({ v: 1 }),
    Map({ v: 1 }),
    Map({ v: 0 }),
    Map({ v: 2 })
    ])
    const groupsOfMaps = listOfMaps.groupBy(x => x.get(‘v’))
    // Map {
    // 0: List [ Map{ “v”: 0 }, Map { “v”: 0 } ],
    // 1: List [ Map{ “v”: 1 }, Map { “v”: 1 } ],
    // 2: List [ Map{ “v”: 2 } ],
    // }

    查找数据
    indexOf() 、 lastIndexOf Map不存在此方法
    作用:和js数组中的方法相同,查找第一个或者最后一个value的index值,找不到则返回-1
    用法:
    Immutable.fromJS([1,2,3,4]).indexof(3) //2
    Immutable.fromJS([1,2,3,4]).lastIndexof(3) //2

    findIndex() 、 findLastIndex() Map不存在此方法
    作用:查找满足要求的元素的index值
    用法:
    Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{
    return value%2 === 0;
    }) // 1
    Immutable.fromJS([1,2,3,4]).findLastIndex((value,index,array)=>{
    return index%2 === 0;
    }) // 3

    find() 、 findLast()
    作用:查找满足条件的元素的value值
    用法:
    Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{
    return value%2 === 0;
    }) // 2

    Immutable.fromJS([1,2,3,4]).findLast((value,index,array)=>{
    return value%2 === 0;
    }) // 4

    findKey() 、 findLastKey()
    作用:查找满足条件的元素的key值
    用法:
    Immutable.fromJS([1,2,3,4]).findKey((value,index,array)=>{
    return value%2 === 0;
    }) // 1

    Immutable.fromJS([1,2,3,4]).findLastKey((value,index,array)=>{
    return value%2 === 0;
    }) // 3

    findEntry() 、 findLastEntry()
    作用:查找满足条件的元素的键值对 key:value
    用法:
    Immutable.fromJS([1,2,3,4]).findEntry((value,index,array)=>{
    return value%2 === 0;
    }) // [1,2]

    Immutable.fromJS([1,2,3,4]).findLastEntry((value,index,array)=>{
    return value%2 === 0;
    }) // [3,4]

    keyOf() lastKeyOf()
    作用:查找某一个value对应的key值
    用法:
    Immutable.fromJS([1,2,3,4]).keyOf(2) //1
    Immutable.fromJS([1,2,3,4]).lastKeyOf(2) //1

    max() 、 maxBy()
    作用:查找最大值
    用法:
    Immutable.fromJS([1, 2, 3, 4]).max() //4

    Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).maxBy((value,index,array)=>{
    return value.get(‘a’)
    }) //{a:4}

    min() 、 minBy()
    作用:查找最小值
    用法:
    Immutable.fromJS([1, 2, 3, 4]).min() //1

    Immutable.fromJS([{a;1},{a:2},{a: 3},{a:4}]).minBy((value,index,array)=>{
    return value.get(‘a’)
    }) //{a:1}

    创建子集
    slice()
    作用: 和原生js中数组的slice数组一样,包含两个参数,start和end,start代表开始截取的位置,end代表结束的位置,不包括第end的元素。若不包括end,则返回整个对象,若end为负数,则返回(start,length-end)对应的数据。若start只有一个并且为负数,则返回最后的end个元素。
    用法:
    Immutable.fromJS([1, 2, 3, 4]).slice(0); //[1,2,3,4]
    Immutable.fromJS([1, 2, 3, 4]).slice(0,2); //[1,2]
    Immutable.fromJS([1, 2, 3, 4]).slice(-2); //[3,4]
    Immutable.fromJS([1, 2, 3, 4]).slice(0,-2); //[1,2]

    rest()
    作用:返回除第一个元素之外的所有元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).rest()//[2,3,4]

    butLast()
    作用:返回除最后一个元素之外的所有元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).rest()//[1,2,3]

    skip()
    作用:有一个参数n, 返回截掉前n个元素之后剩下的所有元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]\

    skipLast()
    作用:有一个参数n, 返回截掉最后n个元素之后剩下的所有元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).skip(1)//[1,2,3]

    skipWhile()
    作用:返回从第一次返回false之后的所有元素
    Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.skipWhile((value,index,list)=>{
    return value > 2;
    }))// [1,2,3,4]
    skipUntil()

    作用:返回从第一次返回true之后的所有元素
    Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.skipWhile((value,index,list)=>{
    return value > 2;
    }))// [3,4]

    take()
    作用:有一个参数n, 返回前n个元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]

    takeLast()
    作用:有一个参数n, 返回最后n个元素
    用法:
    Immutable.fromJS([1, 2, 3, 4]).takeLast(2)//[3,4]

    takeWhile()
    作用:返回从第一次返回false之前的所有元素
    Immutable.fromJS([1, 2, 3, 4]).skipWhile(list.takeWhile((value,index,list)=>{
    return value > 2;
    }))// []

    takeUntil()
    作用:返回从第一次返回true之前的所有元素
    Immutable.fromJS([1, 2, 3, 4]).skipUntil(list.takeUntil((value,index,list)=>{
    return value > 2;
    }))// [1,2]

    处理数据
    reduce()
    作用:和js中数组中的reduce相同,按索引升序的顺序处理元素
    用法:
    Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{
    console.log(pre+next)
    return pre+next;
    })
    // 3 6 10

    reduceRight()
    作用:和js中数组中的reduce相同,按索引降序的顺序处理元素
    用法:
    Immutable.fromJS([1,2,3,4]).reduceRight((pre,next,index,arr)=>{
    console.log(pre+next)
    return pre+next;
    })
    // 7 9 10

    every()
    作用:判断整个对象总中所有的元素是不是都满足某一个条件,都满足返回true,反之返回false。
    代码:
    Immutable.fromJS([1,2,3,4]).every((value,index,arr)=>{
    return value > 2
    }) // false

    some()
    作用:判断整个对象总中所有的元素是不是存在满足某一个条件的元素,若存在返回true,反之返回false。
    代码:
    Immutable.fromJS([1,2,3,4]).some((value,index,arr)=>{
    return value > 2
    }) // true

    join()
    作用:同js中数组的join方法。把准换为字符串
    用法:
    Immutable.fromJS([1,2,3,4]).join(’,’) //1,2,3,4

    isEmpty()
    作用:判断是否为空
    用法:
    Immutable.fromJS([]).isEmpty(); // true
    Immutable.fromJS({}).isEmpty(); // true

    count()
    作用:返回元素个数,可自定义条件,返回满足条件的个数
    用法:
    const list = Immutable.fromJS([1,2,3,4]);
    const map = Immutable.fromJS({a:1,b:2,c:3,d:4});

    list.count((value,index,list)=>{
    return value > 2;
    }) //2

    map.count((value,index,list)=>{
    return value > 2;
    }) //2

    countBy()
    作用:与count不同的是,countBy返回一个对象
    用法:
    const list = Immutable.fromJS([1,2,3,4]);
    const map = Immutable.fromJS({a:1,b:2,c:3,d:4});

    list.countBy((value,index,list)=>{
    return value > 2;
    } //{false: 2, true: 2}

    map.countBy((value,index,list)=>{
    return value > 2;
    } //{false: 2, true: 2}

    参考
    immutable-js官方文档

    作者:桂圆_noble
    链接:https://www.jianshu.com/p/0fa8c7456c15
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • 提供一个抽象的ImmutableCollection类,该类扩展(并限制了)SplFixedArray类,并提供(派生的)不可变集合类具有行为逻辑的多个特征。 为什么用这个 常规的php“数组”根本不是数组,而是经过排序的哈希图。 它们...
  • package:immutable_state可以轻松使用,也可以与package:flutter_immutable_state这样的现成集成package:flutter_immutable_state 。 为什么? 复杂应用程序中的UI状态管理是一个已解决的问题。 不可变的应用程序...
  • Immutable

    2019-07-19 21:56:27
    Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构( Persistent Data Structure),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。...

    导入

    案例:

    const obj ={
        name:'Shirley'
    }
    
    const newObj = obj
    
    console.log('obj',obj)
    console.log('newObj',newObj)
    

    由于js的对象和数组都是引用类型。所以newObj的obj实际上是指向于同一块内存地址的, 所以结果是newState和state是相等的。

    在这里插入图片描述

    尝试修改一下数据:

    const obj ={
        name:'Shirley'
    }
    
    const newObj = obj
    
    newObj.name = 'zhangsan'
    
    console.log('obj',obj)
    console.log('newObj',newObj)
    

    结果:
    在这里插入图片描述
    可以看到,newObj的修改也会引起obj的修改。要解决这个问题,js中提供了另一种修改数据的方式,要修改一个数据之前先制作一份数据的拷贝,像这样:

    const obj ={
        name:'Shirley'
    }
    
    const newObj = Object.assign({},obj) // 对象的合并 也就是说在内存中开辟了一块内存空间,两者的地址不一样了
    
    newObj.name = 'zhangsan'
    
    console.log('obj',obj)
    console.log('newObj',newObj)
    

    在这里插入图片描述
    我们可以使用很多方式在js中复制数据,比如, Object.assign, Object.freeze, slice, concat, map, filter, reduce等方式进行复制,但这些都是浅拷贝,就是只拷贝第一层数据,更深层的数据还是同一个引用,比如:

    const obj ={
        name:'Shirley',
        count:{
            num:100
        }
    }
    
    const newObj = Object.assign({},obj) // 对象的合并 也就是说在内存中开辟了一块内存空间,两者的地址不一样了
    
    newObj.count.num = 2000
    
    console.log('obj',obj)
    console.log('newObj',newObj)
    

    在这里插入图片描述
    可以看到,当在更改newState更深层次的数据的时候,还是会影响到state的值。如果要深层复制,就得一层一层的做递归拷贝,这是一个复杂的问题。虽然有些第三方的库已经帮我们做好了,比如lodashcloneDeep方法。但是深拷贝是非常消耗性能的。

    Immutable

    不可变数据 (Immutable Data )就是一旦创建,就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构( Persistent Data Structure),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的s性能损耗,Immutable 使用了 结构共享(Structural Sharing),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。

    在这里插入图片描述

    immutable.js的优缺点

    优点:

    • 降低immutable带来的复杂度
    • 节省内存
    • 历史追溯性(时间旅行):时间旅行指的是,每时每刻的值都被保留了,想回退到哪一步只要简单的将数据取出就行,想一下如果现在页面有个撤销的操作,撤销前的数据被保留了,只需要取出就行,这个特性在redux或者flux中特别有用
    • 拥抱函数式编程:immutable本来就是函数式编程的概念,纯函数式编程的特点就是,只要输入一致,输出必然一致,相比于面向对象,这样开发组件和调试更方便。推荐一本函数式编程的在线免费书《JS 函数式编程指南

    缺点:

    • 需要重新学习api
    • 资源包大小增加(源码5000行左右)
    • 容易与原生对象混淆:由于api与原生不同,混用的话容易出错。

    使用Immutable.js

    参考官网重点讲解数据不可变数据的创建、更新及比较方式 。

    Map

    import { Map } from 'immutable'
    
    const map = Map({
      a: 1,
      b: 2,
      c: 3
    })
    
    const newMap = map.set('b', 20) // immutable数据每次都是生成新的再重新调用set进行修改,所以需要 重新赋值给一个新的变量
    
    console.log(map, newMap) // immutable.Map不是原生的对象
    console.log(map.b, newMap.b) // immutable.Map不是原生的对象, 所以是undefined
    console.log(map.get('b'), newMap.get('b')) // 要取值,需要调用get(key)方法,可以看到,两个值不一样
    
    const obj = {
      a: 1,
      b: 2,
      c: 3
    }
    
    console.log(Map.isMap(map), Map.isMap(obj)) // true false, 使用Map.isMap来判断是否是一个immutable.Map类型
    

    List

    import { List } from 'immutable'
    
    const list = List([1, 2, 3, 4])
    const newList = list.push(5)
    console.log(list, newList)
    console.log(list[4], newList[4]) // undefined undefined
    console.log(list.get(4), newList.get(4)) // undefined 5
    console.log(list.size, newList.size) // 4 5
    
    const arr = [1, 2, 3, 4]
    
    console.log(List.isList(list), List.isList(arr)) // true false
    

    equals & is

    import { Map, is } from 'immutable'
    
    const map = Map({
      a: 1,
      b: 2,
      c: 3
    })
    
    const anotherMap = Map({
      a: 1,
      b: 2,
      c: 3
    })
    
    console.log(map == anotherMap) // false
    console.log(map === anotherMap) // false
    console.log(map.equals(anotherMap)) // 使用equals进行比较 true
    console.log(is(map, anotherMap)) // 使用is进行比较 true
    

    List常用api

    import { List } from 'immutable'
    
    const list = List([1, 2, 3, 4])
    const list1 = list.push(5)
    const list2 = list1.unshift(0)
    const list3 = list.concat(list1, list2)
    const list4 = list.map(v => v * 2)
    
    console.log(list.size, list1.size, list2.size, list3.size, list4.toJS()) // 4 5 6 15, [2, 4, 6, 8]
    

    Map常用api

    import { Map } from 'immutable'
    
    const alpha = Map({
      a: 1,
      b: 2,
      c: 3
    })
    const objKeys = alpha.map((v, k) => k)
    console.log(objKeys.join()) // a, b, c
    
    
    const map1 = Map({
      a: 1,
      b: 2
    })
    const map2 = Map({
      c: 3,
      d: 4
    })
    const obj = {
      d: 400,
      e: 50
    }
    
    const mergedMap = map1.merge(map2, obj)
    
    console.log(mergedMap.toObject())
    console.log(mergedMap.toJS())
    

    嵌套数据结构

    const { fromJS } = require('immutable');
    const nested = fromJS({ a: { b: { c: [ 3, 4, 5 ] } } });
    
    const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
    // Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 6 } } }
    
    console.log(nested2.getIn([ 'a', 'b', 'd' ])); // 6
    
    const nested3 = nested2.updateIn([ 'a', 'b', 'd' ], value => value + 1);
    console.log(nested3);
    // Map { a: Map { b: Map { c: List [ 3, 4, 5 ], d: 7 } } }
    
    const nested4 = nested3.updateIn([ 'a', 'b', 'c' ], list => list.push(6));
    // Map { a: Map { b: Map { c: List [ 3, 4, 5, 6 ], d: 7 } } }
    

    在redux中使用immutable.js

    redux官网推荐使用redux-immutable进行redux和immutable的集成。几个注意点:

    redux中,利用combineReducers来合并多个reduce, redux自带的combineReducers只支持原生js形式的,所以需要使用redux-immutable提供的combineReducers来代替

    // 使用redux-immutable提供的combineReducers方法替换redux里的combineReducers
    import {combineReducers} from 'redux-immutable'
    import reducerOne from './reducerOne'
    import reducerTwo from './reducerTwo'
     
    const rootReducer = combineReducers({
        reducerOne,
        reducerTwo
    });
     
    export default rootReducer;
    

    reducer中的initialState也需要初始化成immutable类型, 比如一个counter的reducer

    import { Map } from 'immutable'
    
    import ActionTypes from '../actions'
    
    const initialState = Map({
      count: 0
    })
    
    export default (state = initialState, action) => {
      switch (action.type) {
        case ActionTypes.INCREAMENT:
          return state.set('count', state.get('count') + 1) // 使用set或setIn来更改值, get或者getIn来取值
        case ActionTypes.DECREAMENT:
          return state.set('count', state.get('count') - 1)
        default:
          return state
      }
    }
    

    state成为了immutable类型,connectmapStateToProp也需要相应的改变

    const mapStateToProps = state => ({
      count: state.getIn(['counter', 'count']) // 永远不要在mapStateToProps里使用`toJS`方法,因为它永远返回一个新的对象
    })
    

    shouldComponentUpdate里就可以使用immutable.is或者instance.equals来进行数据的对比了。

    展开全文
  • Mkaes不可变JS对象登录到控制台时...基于Immutable DevTools:https://github.com/andrewdavey/immutable-devtools 源代码:https://github.com/mattzeunert/immutable-object-formatter-extension 支持语言:English
  • go-immutable-radix, 在Golang中,一个不可变的基数树实现 go-immutable-radix 提供实现不可变 radix的iradix 包。 包只提供单个 Tree 实现,针对稀疏节点优化。作为一个基数树,它提供以下内容:O(k) 操作。在许多...
  • java11-streams-laziness-needs-immutable-collections 使用可变集合作为流源的示例可能会在处理过程中引起认知中断。 参考: 前言 流在几个方面与集合有所不同: 没有存储空间。 流不是存储元素的数据结构。 而是...
  • 语言:English 将不可变JS对象记录到控制台时,使其更具...基于Immutable DevTools:https://github.com/andrewdavey/immutable-devtools源代码:https://github.com/mattzeunert/immutable-object-formatter-extension
  • npm install dot-prop-immutable 这个模块的动机是有一个简单的实用程序来改变 React-Redux 应用程序中的状态,而不会改变普通 JavaScript 对象的现有状态。 如果您想要真正的不可变数据集合,请查看酷炫的库 。 一...
  • 不可变模型 由 Immutable.js 支持的不可变模型和集合抽象
  • Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改,是的应用开发更简单,允许使用函数式编程技术,比如惰性评估。微信小程序无法直接使用Immutable.js,下面就来说说微信小程序如何使用...
  • 脑React本机不可变商店 带有 React Native 和 Immutable Store 的 Cerebral 包
  • @ hyperswarm / immutable-record 有状态的不可变记录,可以重新声明自己以及更多内容。 npm install @hyperswarm/immutable-record 用法 const ImmutableRecord = require ( '@hyperswarm/immutable-record' ) ...
  • 主要介绍了启动Azkaban报错:java.lang.NoSuchMethodError: com.google.common.collect.ImmutableMap.toImmutableMap,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 67,121
精华内容 26,848
关键字:

immutable