写出优雅漂亮的javascript代码,易读还是难读了呢?

javascript 优化if

使用if嵌套的代码

  • 注释:

    content是一个包含文档所有内容的json对象。

1
2
3
4
5
6
7
8
9
if(status==null){
statusName="办理中";
}else{
if(status=="3"){
statusName="通过";
else{
statusName=content.statusName;
}
}

逻辑分析, 这是一段简单判断显示流程状态的代码。

  1. 如果状态代码 status==null 中文状态显示’办理中
  2. 如果status不为null status==3的情况下 中文状态显示’通过’,否则显示statusName本身值。

1. 换做三元表达式改写:

“Write less, do more.”

1
2
3
status==null?statusName="办理中":
status=="3"?statusName="通过":
statusName=content.statusName;

代码是不是清爽了很多?

  • tips

    回车只是为了阅读代码方便,这并不是3行代码而是一行,:前的语句最后不能加``;. 三元表达式有一个关于return`的问题。 三元表达式内无法实现 return 语句。

    1
    isTrue? return true: return false;

    这样的写法不会报错但是不会得到你希望的结果。 如果这样写就是你想要的执行结果:

    1
    return isTrue?true:false;
    你学废了吗?

2. 换做switch改写

1
2
3
4
5
6
7
8
9
10
11
12
13
switch(statusName){
case null:
statusName = "办理中";
break;
default:
switch(status){
case "3":
statusName = "通过";
break;
default:
statusName = content.statusName;
}
}

这个例子转换为switch还是复杂。 所以使用什么方式转换还是要看实际情况。希望大家都能写出自己喜欢更加优雅的代码!

  • tips

    switch 使用严格匹配=== 下面的例子case 0不会匹配

1
2
3
4
5
6
7
8
var x="0";
switch(x){
case 0:
....
break;
default:
....
}