immutable:
Immutable Data 一旦创建,就不能再被更改的数据。对 Immutable 对象的任何增删改操作都会返回一个新的 Immutable 对象;实现的原理是 Persistent Data Structure(持久化数据结构),也就是使用旧数据创建新数据时,要保证旧数据同时可用且不变;同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗,Immutable 使用了 Structural Sharing(结构共享),即如果对象树中一个节点发生变化,只修改这个节点和受它影响的父节点,其它节点则进行共享。
方法可以链式调用!
常用的有:
- Map:键值对集合,对应于 Object,ES6 也有专门的 Map 对象
- List:有序可重复的列表,对应于 Array
- Set:无序且不可重复的列表
Map、List(Map、List只能创建一层的immutable对象结构)
转换:
toObject() 转成原生js对象类型,只转一层 例如:map1. toObject()
toArray() 转成数组类型,只转一层 例如: list1.toArray()
深层次转换:耗性能,尽量少用!
toJS() 将immutable对象深层次转换成原生js的对象 例如:map1. toJS()
fromJS() 将原生的js对象obj深层次转换成immutable形式的对象 例如:fromJS(obj)
创建Map数据结构:
const map1 = immutable.fromJS({
a:1,
b:2,
c:3,
obj:{
name:"张三"
},
arr:[1,2,3,4,5]
})
创建list数据结构:
const list = immutable.List([1,2,3,4,5])
比较2个immutable对象是否相同:immutable.is(map1,map2)或者map1.equals(map2)
const map1 = immutable.Map({a:1,b:2})
const map2 = map1.update("a",(x)=>x = 10);
console.log(immutable.is(map1,map2)) //true
console.log(map1.equals(map2)) //true
console.log(map1==map2) //false
增set/setIn
const map2 = map1.set("d",100);
const map2 = map1.setIn(["d","age"],200)
删delete/deleteIn
const map2 = map1.delete("a");
const map2 = map1.deleteIn(["obj","name"])
改update/updateIn
const map2 = map1.update("a",(x)=>x = 200);
const map2 = map1.updateIn(["a"],(x)=>x = 200);
查get/getIn
const str = map1.get("a");
const str = map1.getIn(["a"]);
遍历map
map1.map((item,index)=>{
console.log(item)
})
list1.map((item,index)=>{
console.log(item)
})
过滤filter
map1.filter((key,val)=>{
return val == 1
}) //Map{a:1}
const list1 = immutable.List([1,2,3,["a","b"]]);
增set/setIn/push
const list2 = list1.push(100);
删delete/deleteIn/splice
const list2 = list1.splice(1,1);
删除Map中多个key值deleteAll([key1,key2]) (Map独有,List没有)
改splice
const list2 = list1.splice(2,1,"aaa");
查get/getIn
const list2 = list1.getIn([3,0]);
浅合并数据merge:新旧数据对比,不存在则增加,已存在则覆盖
const newlist = list1.merge(list2);
清除所有数据clear()
查看immutable对象长度 size / count()
console.log(newlist.size);
console.log(newlist.count());
判断一个数据结构是不是List/Map类型:List.isList() 和 Map.isMap()
List.isList([]); // false
List.isList(List()); // true
判断是否存在某一个key:has(key) 、 hasIn([key])
判断是否存在某一个value:
includes(value)
注意:以上方法中,方法名未加In的都是单层查找,加了In可深层次向下继续查找!
List操作:以下几个只适用于List
(1)前增unshift 后增push() 前删shift 后删pop() 插入insert(index,value) 设置长度 setSize(n) 查找下标对应值indexOf() 截取slice(first,end) 包含开始不包含结尾
(2)查找满足条件的元素的value值find() 、 findLast()
Immutable.fromJS([1,2,3,4]).find((value,index,array)=>{
return value%2 === 0;
}) // 2
(3)查找满足要求的元素的index值findIndex() findLastIndex()
Immutable.fromJS([1,2,3,4]).findIndex((value,index,array)=>{
return value%2 === 0;
}) // 1
(4)跳过第n个 skip(n) 跳过第n个的后几个
skipLast()
Immutable.fromJS([1, 2, 3, 4]).skip(1)//[2,3,4]
(5)返回前n个 take(n) 返回后n个 takeLast()
Immutable.fromJS([1, 2, 3, 4]).take(2)//[1,2]
(6)按索引升序 reduce() 降序 reduceRight()
Immutable.fromJS([1,2,3,4]).reduce((pre,next,index,arr)=>{
console.log(pre+next)
return pre+next;
}) // 3 6 10