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同理。

2. 删

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

3. 改

   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})
   

4. 查

   返回的不是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

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