JS：2个值相互转换，实现与优化
摘要： 前端开发 浏览器兼容性 ie6浏览器兼容性前端开发 前端开发浏览器内核 功能：要2个值之间相互转换输出 就是这样： 未付款 <-> 0 已付款 <-> 1 无效 <-> 4 ……
| 前端开发 浏览器兼容性 |
| ie6浏览器兼容性前端开发 |
| 前端开发浏览器内核 |
功能：要2个值之间相互转换输出
就是这样：
未付款 <-> 0
已付款 <-> 1
无效 <-> 4
线下 <-> 5
下面是我的第一次实现方法：
首先想到的是最简单的 if else 或者 switch 选择了， 不过代码量看起来很多！不爽{:1_526:}
function convertStatus(value){
switch(value){
case “未付款” :
return 0;
case “已付款” :
return 1;
case “无效” :
return 4;
case “线下” :
return 5;
case 0:
return “未付款”;
case 1:
return “已付款”;
case 4:
return “无效”;
case 5:
return “线下”;
}
}
然后就想到了用三目运算符来精简代码
function convertStatus_1(value){
return value==”未付款” ? 0 : value==”已付款” ? 1 : value==”无效” ? 4 : value==”线下” ? 5 : value==0 ? “未付款” : value==1 ?
“已付款” : value==4 ? “无效” : value==5 ? “线下” : null;
}
这个看起来1行好像是简单好多，但是易读性很差，不太好{:1_527:} 换！
然后怎么想不出来怎么优化，只能找找大神给点思路。
最后在大神们的指导下，换成这种方式了，以前完全没想到这样做，涨姿势了{:1_492:}
function convertStatus_2(value){
var config = {
“未付款” : 0,
“已付款” : 1,
“无效” : 4,
“线下” : 5,
‘0’ : “未付款”,
‘1’ : “已付款”,
‘4’ : “无效”,
‘5’ : “线下”
}
return value in config ? config[value] : null ;
}
这个把值都写进了1个config对象，然后用 in 操作符进行属性查找，然后返回属性值！
还有另外1个方法是:
config.hasOwnProperty(value) ? config[value] : null
突然出现了2个新东西，一下子就兴趣来了，赶紧百度是什么东西！
in操作符用来判断某个属性属于某个对象，可以是对象的直接属性，也可以是通过prototype继承的属性。
hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
瞬间又涨姿势了。虽然在这次的功能无需用到 hasOwnproperty ，但是当原型链很复杂的时候，继承了很多东西的时候，就很有用了！{:1_495:}
| 前端开发解决浏览器的兼容性 |
| 前端开发常见的浏览器兼容问题 |
| 前端开发最好用的浏览器 |
» 本文来自：前端开发者 » 《JS：2个值相互转换，实现与优化》
» 本文链接地址：https://www.rokub.com/6538.html
» 您也可以订阅本站：https://www.rokub.com
近期评论