immutable的使用

一、什么是immutable

immutable是一种持久化数据结构，immutable数据就是一旦创建，就不能更改的数据，每当对immutable对象进行修改的时候，就会返回一个新的immutable对象，以此来保证数据的不可变。

二、immutable的几种数据类型

List: 有序索引集，类似JavaScript中的Array。

Map: 无序索引集，类似JavaScript中的Object。

OrderedMap: 有序的Map，根据数据的set()进行排序。

Set: 没有重复值的集合。

OrderedSet: 有序的Set，根据数据的add进行排序。

Stack: 有序集合，支持使用unshift（）和shift（）添加和删除。

Range(): 返回一个Seq.Indexed类型的集合，这个方法有三个参数，start表示开始值，默认值为0，end表示结束值，默认为无穷大，step代表每次增大的数值，默认为1.如果start = end,则返回空集 合。

Repeat(): 返回一个vSeq.Indexe类型的集合，这个方法有两个参数，value代表需要重复的值，times代表要重复的次数，默认为无穷大。

Record: 一个用于生成Record实例的类。类似于JavaScript的Object，但是只接收特定字符串为key， 具有默认值。

Seq: 序列，但是可能不能由具体的数据结构支持。

Collection: 是构建所有数据结构的基类，不可以直接构建。

在工作中用的最多的就是LIst和Map，本篇文章主要介绍这两种数据类型的API。

三、immutable的使用

首先cnpm install immutable -S下载依赖

引入immutable

const immutable = require("immutable")

1、创建Map数据结构

const immutable = require("immutable")
//创建Map数据结构
//第一种方式
const map = immutable.fromJS({
    a:1,
    b:2,
    c:3,
    d:{
        f : 4
    }
})
console.log(map)//Map { "a": 1, "b": 2, "c": 3, "d": Map { "f": 4 } }
//第二种方式
const map = immutable.Map({
    a : 1,
    b : 2,
    c : {
        f : 5
    }
})
console.log(map)//Map { "a": 1, "b": 2, "c": 3, "d": Map { "f": 4 } }
//两种方式的不同在于map list只能创建一层的immutable对象结构  如果使用fromJS可以进行深层次的immutable数据转换

2、创建List数据结构

//第一种
const List = immutable.fromJS([
    1,2,3,4,[1,2]
])
console.log(List)//List [ 1, 2, 3, undefined, List [ 1, 2 ] 
const list = immutable.List(
    [1,2,3,4,[1,2]]
)
console.log(list)//List [ 1, 2, 3, 4, 1,2 ]

3转换数据类型

const list = immutable.fromJS([
    1,2,3,4,[1,2]
])
console.log(list.toJS())//[ 1, 2, 3, 4, [ 1, 2 ] ]
const map = immutable.fromJS({
    a:1,
    b:2,
    c:3,
    d : {
        f : 4
    }
})
console.log(map.toJS())//{ a: 1, b: 2, c: 3, d: { f: 4 } }
//toJS()将Map和List数据类型转换为原生的js对象
var obj = {
    a : 1,
    b : 2,
    c : [1,2,3]
}

console.log(obj)//{ a: 1, b: 2, c: [ 1, 2, 3 ] }
console.log(immutable.fromJS(obj))//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
//fromJS() 将原生的JS对象转为Map和List的数据结构

4比较2个immutable对象是否相同

const map = immutable.Map({a : 1,b : 2});
const map1 = map.update("a",()=>x=10);
console.log(immutable.is(map1,map))//false
//对比两个immutable如果相同返回true，不同则返回false

5immutable的增删改查

//增
const map = immutable.fromJS({
    a : 1,
    b : 2,
    c : [1,2,3]
})
console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
console.log(map.set("d",10));//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ], "d": 10 }
console.log(map.setIn(["d" , "sex"],"男"))//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ], "d": Map { "sex": "男" } }
//set和setIn都可以增加，但是setIn可以增加多层

//删
const map = immutable.fromJS({
    a : 1,
    b : 2,
    c : [1,2,3]
})
console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
console.log(map.delete("a"))//Map { "c": List [ 1, 2, 3 ], "b": 2 }
console.log(map.deleteIn(["c",0]))//Map { "a": 1, "b": 2, "c": List [ 2, 3 ] }
//delete和deleteIn都可以删除，但是deleteIn可以删除多层中的属性。
//改
const map = immutable.fromJS({
    a : 1,
    b : 2,
    c : [1,2,3]
})
console.log(map)//Map { "a": 1, "b": 2, "c": List [ 1, 2, 3 ] }
console.log(map.update("a",(x)=>x=3))//Map { "a": 3, "b": 2, "c": List [ 1, 2, 3 ] }
console.log(map.updateIn(["c",0],(x)=>x=10))//Map { "a": 1, "b": 2, "c": List [ 10, 2, 3 ] }
//update和updateIn都可以进行修改数据，但是updateIn可以修改多层数据中的数据。
//查
const map = immutable.fromJS({
    a : 1,
    b : 2,
    c : [4,2,3]
})
console.log(map)//Map { "a": 1, "b": 2, "c": List [ 4, 2, 3 ] }

console.log(map.get("a"))//1
console.log(map.getIn(["c",0]))//4
//同样get和getIn都可以查看immutable中的数据，但是getIn可以查看多层对象中的数据。

6，遍历

const map = immutable.fromJS({
    a : 1,
    b : 2,
    c : [4,2,3]
})

map.map((item,index)=>{
        console.log(item)//1
                        //2
                        //List [ 4, 2, 3 ]
})

7,合并/查看对象长度

/合并
const list1 = immutable.fromJS([1,2,[1,2]]);
const list2 = immutable.fromJS([7,8,[1,3]]);
const newList =list1.merge(list2)
console.log(newList)//List [ 1, 2, List [ 1, 2 ], 7, 8, List [ 1, 3 ] ]
const list1 = immutable.fromJS([1,2,[1,2]]);
const list2 = immutable.fromJS([7,8,[1,3]]);
const newList =list1.merge(list2)
const map = immutable.fromJS({a:1,b:2})
//查看长度
console.log(map.size)//2
console.log(newList.count())//6