imutable.js常用操作

Posted by leesx on January 12, 2017

imutable.js常用操作

参考文档

imutable

Immutable.fromJS()格式化过的js数据,里面数据是对象的可以使用对应的Map中的方法,里面数据是数组的可以使用对应的List方法 。

示例

var $$state = Immutable.fromJS({a:[2,3,4]})
1. 对于单层数据使用update,出现多层嵌套的数据,使用updateIn`
//设置或者修改某一项的值
$$state.update('a',list=>list.set(0,55)).toJS() // {a:[55,3,4]} 
2. 添加 同数组方法
$$state.update('a',list=>list.push(10)).toJS() // // {a:[2,3,4,10]}
3. 删除 同数组的splice 需要传入要删除项的索引
$$state.update('a',list=>list.delete(0)).toJS() // {a:[3,4]}
3. 清空数组中的数据
$$state.update('a',list=>list.clear()).toJS() // {a:[]}
4.删除数组的最后一项
$$state.update('a',list=>list.pop()).toJS() // {a:[2,3]}
5. 向数组的第一项添加数据
$$state.update('a',list=>list.unshift(20)).toJS()  // {a:[20,2,3,4]}
6. 更新数组的某一项
$$state.update('a',list=>list.update(0,list2=>list2 = 99)).toJS() // {a:[99,3,4]}
7. 合并数组 会将对应索引的项覆盖,如果没有对应的索引,则添加
$$state.update('a',list=>list.merge([99,4,5,10])).toJS() // {a:[99,4,5,10]}
8. 注意使用keyPath [0,1] 时,对List类型不太好使,fromJS处理过的可以使用
var imArr = Immutable.fromJS([2,3,[3,4,5,[6,7,8]]])
imArr.setIn([2,0],88).toJS() //对 第3项的第一项修改
var data1 = Immutable.fromJS({ a: { b: { c: 10 } } });
//mergeDeep不需要写回调函数,第二个参数是要修改的值
data1.mergeDeep(['a','b','c'],22).toJS()

mergeIn和updateIn的区别 mergeIn不需要写回调函数,第二个参数是要修改的值;updateIn需要些回调函数,在回调函数里面修改参数
d.updateIn(['a','b'],abc=>abc.merge({c:666})).toJS()
9. 根据一组索引删除掉数组中对应的数据
//eg.原生js
var arr = ['aaa','bbb','ccc','ddd'];
var indexArr = [0,3,2];
arr.filter((item2,index)=> indexArr.indexOf(index) !==-1) // ['bbb']


//eg. ImutableJS对应的方法

var data = Immutable.fromJS({a:[{a:11},{a:22},{a:33},{a:44}]})
var indexArr = [1,3];
data.updateIn('a',list=>list.filter((v,index)=> indexArr.indexOf(index) === -1)).toJS() // {a:[{a:11},{a:33}]}