共计 3058 个字符，预计需要花费 8 分钟才能阅读完成。
前言
今天无意间看到一篇文章 (- -。忘记哪了.. 我大概说一下吧, 本来可以直接分享的 …), 对于平时冗长的 if else 的优化. 平时也是这么处理的 通过 object 对象的数据结构来实现优雅的判断条件书写! 但是看到通过 map 数据结构的利用 感觉适用更广, 局限更低了！一起来看看
首先对于 Map 数据结构来做个简单介绍:
定义:
Map 对象保存键值对。任何值 (对象或者原始值) 都可以作为一个键或一个值。
语法:
new Map([iterable]) Iterable 可以是一个数组或者其他 iterable 对象，其元素或为键值对，或为两个元素的数组。每个键值对都会添加到新的 Map。null 会被当做 undefined。
方法:
Map.prototype.get(key) 返回键对应的值，如果不存在，则返回 undefined。Map.prototype.has(key) 返回一个布尔值，表示 Map 实例是否包含键对应的值。Map.prototype.set(key, value) 设置 Map 对象中键的值。返回该 Map 对象。对于 Map 数据结构来说, 不支持 = 号的赋值~~~~~~~
关于 Map 其他介绍 API,** 不多介绍了
正文
对于判断条件的单一
var status = 8;
// 常用的 if else 进行 条件判断来 do somethings
if(status == 1){
console.log(111111)
}else if(status == 2){
console.log(222222)
}else if(status == 3){
console.log(333333)
}else if(status == 4){
console.log(444444)
}else if(status == 5){
console.log(555555)
}else{
console.log(status)
} // 8
// switch case 的写法 相比 if else 是有一些优化了!
switch (status){
case 1:
console.log(status)
break
case 2:
console.log(status)
break
case 3:
console.log(status)
break
case 4:
console.log(status)
break
case 5:
console.log(status)
break
default:
console.log(status)
break;
} // 8
// 对象 object 数据结构的写法 简洁了
var obj = {
“1”:”11111″,
“2”:”22222″,
“3”:”33333″,
“4”:”44444″,
“5”:”55555″,
}
console.log(obj[status] || status) // 8
// Map 数据结构的写法 和 object 差不多
var mMap = new Map([
[“1″,”11111”],
[“2″,”22222”],
[“3″,”33333”],
[“4″,”44444”],
[“5″,”55555”]
])
console.log(mMap.get(status) || status) // 8
结果都可以达到预期的效果! 判断进行的顺利 ! 然而条件是个多个条件呢? 范围呢? 条件是个运算呢? 怎么实现? 接着看
var name = “lisi” , status = 1;
//if else 写法
if(name == “lisi”){
if(status == 1){
console.log(“lisi1”)
}else if(status == 2){
console.log(“lisi2”)
}else if(status == 3){
console.log(“lisi3”)
}else if(status == 4){
console.log(“lisi4”)
}else if(status == 5){
console.log(“lisi5”)
}else{
console.log(status)
}
}else if(name == “zhangsan”){
if(status == 1){
console.log(“zhangsan1”)
}else if(status == 2){
console.log(“zhangsan2”)
}else if(status == 3){
console.log(“zhangsan3”)
}else if(status == 4){
console.log(“zhangsan4”)
}else if(status == 5){
console.log(“zhangsan5”)
}else{
console.log(status)
}
} //lisi1
//swtich case 写法
switch (status && name){
case 1 && “lisi”:
console.log(name + status)
break
…
default:
console.log(status)
break;
} //lisi1
// 对象数据结构的写法 // 简洁
var obj = {
“lisi_1″:”lisi1”,
“lisi_2″:”lisi2”,
…
“zhangsan_5″:”zhangsan5”,
}
console.log(obj[name + “_” + status] || status) // lisi1
// Map 数据结构的写法 和 object 差不多
var mMap = new Map([
[“lisi_1″,”lisi1”],
[“lisi_2″,”lisi2”],
…
[“zhangsan_5″,”zhangsan5”]
])
console.log(mMap.get(name + “_” +status) || status) //lisi1
多个条件也进行了对比, 都可以完美实现，书写上相对于来说更为简洁 当然可读性较低一点.. 性能差异肯定也存在. 不过对于平日的基础业务可以忽略不计. 接下来对于运算, 范围用 Map 来实现一下 来了解一下~
var mMap = new Map([
[162,function(h,a){console.log(“he height is” + h + ” ,he age is” + a)}],
[174,function(h,a){console.log(“he height is” + h + ” ,he age is” + a)}],
[198,function(h,a){console.log(“he height is” + h + ” ,he age is” + a)}],
])
var height = 150, age = 12;
mMap.get(height + age)(height,age) //he height is150 ,he age is12
// 正则
var mMap = new Map([
[/^\d{2,5}$/,function(h,a){console.log(“ 位数大于 2 且小于 5 ”)}],
[/^\d{5,10}$/,function(h,a){console.log(“ 位数大于 5 且小于 10”)}],
])
var arr = […mMap].filter(([k,v])=>(k.test(`123`)))
arr.forEach(([k,v])=>v.call(this)) // 位数大于 2 且小于 5
Map 结构是支持任何对象任何原始值作为 key|value 的, 所以你们可以开动大脑再试试其它, 我就不介绍了. 明白这样写就好, 当然可以适当封装, 但是这个业务代码耦合性略高, 封装意义不大, 此处就不做说明了!
最后
有小伙伴看过那篇的可以评论区贴一下,(那篇文章篇幅比我长 … 比我肯定全一些..) 我只是简单的介绍了一下. 平日都这么用. 分享给大家.
关于 webpack 后续的文章 周一见 !
