Immutable的基本使用

一、Immutable简介

功能用法：Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。
Immutable 实现的原理:是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗。
　　
　　在js中，引用类型的数据，优点在于频繁的操作数据都是在原对象的基础上修改，不会创建新对象，从而可以有效的利用内存，不会浪费内存，这种特性称为mutable（可变），但恰恰它的优点也是它的缺点，太过于灵活多变在复杂数据的场景下也造成了它的不可控性，假设一个对象在多处用到，在某一处不小心修改了数据，其他地方很难预见到数据是如何改变的，针对这种问题的解决方法，一般就像刚才的例子，会想复制一个新对象，再在新对象上做修改，这无疑会造成更多的性能问题以及内存浪费。
  为了解决这种问题，出现了immutable对象，每次修改immutable对象都会创建一个新的不可变对象，而老的对象不会改变。

二、Immutable注意的地方
　　1、约定变量命名规则：如所有 Immutable 类型对象以 $$ 开头。
　　2、fromJS和toJS会深度转换数据，随之带来的开销较大，尽可能避免使用，单层数据转换使用Map()和List()
　　3、js是弱类型，但Map类型的key必须是string
　　4、所有针对immutable变量的增删改必须左边有赋值，因为所有操作都不会改变原来的值，只是生成一个新的变量
　　5、immutable对象直接可以转JSON.stringify(),不需要显式手动调用toJS()转原生
　　6、判断对象是否是空可以直接用size
三、Immutable常用API　
immutable里面的两种方法的使用：不属于原生js里面的方法
Map ---》类似对象
List ---》类似数组

immutable 安装和使用命令：
初始化：npm init -y 
安装：cnpm install immutable -S


创建immutable对象方式：
const immutable = require("immutable");

创建Map对象
const map = immutable.Map({
a:10,
b:10
})


1.Map的增删改查  对象在操作的时候使用JSON.stringify(newMap)才能输出
添加
基本数据：const newMap = map.set("d",20);
对象：const newMap = map.setIn(["obj","sex"],{"d":3});
       对象使用：console.log(map,JSON.stringify(newMap));

删
基本数据：//const newMap = map.delete("a");
对象：//const newMap = map.deleteIn(["obj","age"]);
    console.log(map,JSON.stringify(newMap));
改
基本数据：//const newMap = map.update("a",x=>x+6);
对象：//const newMap = map.updateIn(["obj","age"],x=>x+6);
    console.log(map,JSON.stringify(newMap));
查
基本数据：//const newMap = map.get("a");
对象：//const newMap = map.getIn(["obj","name"]);
console.log(map,JSON.stringify(newMap));

Map对象合并
const map = immutable.Map({a:10,b:20,c:30})
const map1 = immutable.Map({name:"张三",age:20,sex:"男"});
console.log(map.merge(map1));

Map深层次对象合并  mergeDeep
将Immutable转换JS对象
console.log(map.toJS())
将JS对象转换为Immutable对象
console.log(immutable.fromJS({a:10,b:20,obj:{age:30,sex:[]}}));
toJS和fromJS特别耗费性能 所以慎用

const map = immutable.fromJS({a:10,b:20,c:30,obj:{}})
toObject
console.log(map.toObject());

2.创建List
const list = immutable.List([1,2,3,4,[20,30,40]]);
const list1 = immutable.List([10,20,30]);

增
const newList = list.push(10);
删 pop shift slice splice
const newList = list.pop()
改
const newList = list.splice(1,1,20);
查
list.map(item=>{
     console.log(item);
})
console.log(list);
const imm  = immutable.fromJS({
     a:10,
    b:[1,2,3,4,5],
    obj:{
        name:"张三"
    }
})
console.log(imm);

将Immutable转换JS对象
console.log(list.toArray());
console.log(list.toJS())

将JS对象转换为Immutable对象
console.log(immutable.fromJS([1,2,3,4]));


合并
const newList = list.concat(list1);
console.log(newList)