一、什么是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