//Map() 原生object转Map对象 (只会转换第一层,注意和fromJS区别)
immutable.Map({name:'danny', age:18})
//List() 原生array转List对象 (只会转换第一层,注意和fromJS区别)
immutable.List([1,2,3,4,5])
//fromJS() 原生js转immutable对象 (深度转换,会将内部嵌套的对象和数组全部转成immutable)
immutable.fromJS([1,2,3,4,5]) //将原生array --> List
immutable.fromJS({name:'danny', age:18}) //将原生object --> Map
//toJS() immutable对象转原生js (深度转换,会将内部嵌套的Map和List全部转换成原生js)
immutableData.toJS();
//查看List或者map大小
immutableData.size 或者 immutableData.count()
// is() 判断两个immutable对象是否相等
immutable.is(imA, imB);
//merge() 对象合并
var imA = immutable.fromJS({a:1,b:2});
var imA = immutable.fromJS({c:3});
var imC = imA.merge(imB);
console.log(imC.toJS()) //{a:1,b:2,c:3}
//增删改查(所有操作都会返回新的值,不会修改原来值)
var immutableData = immutable.fromJS({
a:1,
b:2,
c:{
d:3
}
});
var data1 = immutableData.get('a') // data1 = 1
var data2 = immutableData.getIn(['c', 'd']) // data2 = 3
getIn用于深层结构访问
var data3 = immutableData.set('a' , 2); // data3中的 a = 2
var data4 = immutableData.setIn(['c', 'd'], 4); //data4中的 d = 4
var data5 = immutableData.update('a',function(x){return x+4})
//data5中的 a = 5
var data6 = immutableData.updateIn(['c', 'd'],function(x){return x+4})
//data6中的 d = 7
扫描二维码关注公众号,回复:
4804005 查看本文章
![](/qrcode.jpg)
var data7 = immutableData.delete('a') //data7中的 a 不存在
var data8 = immutableData.deleteIn(['c', 'd']) //data8中的 d 不存在
- fromJS和toJS会深度转换数据,随之带来的开销较大,尽可能避免使用,单层数据转换使用Map()和List()
- js是弱类型,但Map类型的key必须是string!
- 所有针对immutable变量的增删改必须左边有赋值,因为所有操作都不会改变原来的值,只是生成一个新的变量
- 引入immutablejs后,不应该再出现对象数组拷贝的代码
- 获取深层深套对象的值时不需要做每一层级的判空
- immutable对象直接可以转JSON.stringify(),不需要显式手动调用toJS()转原生
- 判断对象是否是空可以直接用size
- 调试过程中要看一个immutable变量中真实的值,可以chrome中加断点,在console中使用.toJS()方法来查看
项目中的应用
<!--删除一个server同时更新store进行页面更新-->
[DELETE_SERVER]: (app, action) => {
let servers = app.get('servers'); //获取store中的servers
let ser = action.payload; //后台返回的结果
let index = servers.findIndex(i => {
return i.get('_id') === ser._id; //判断是否存在
});
if (index === -1) {
return app;
} else {
return app.set('servers', servers.delete(index)); //重新设置删除index后的servers
}
}
<!--更新一个package同时更新store进行页面更新-->
[UPDATE_PACKAGE]: (app, action) => {
let packages = app.get('packages');
let pac = fromJS(action.payload);
let index = packages.findIndex(i => {
return i.get('_id') === pac.get('_id')
})
if (index === -1) return app;
app = app.set('package', pac);
return app.set('packages', packages.update(index, () => {
return pac
}));
},