JavaScript同样的意思,更巧的写法

   今天来介绍一下javascript不一样的写法,很简单哦。

1、当条件成立时执行a方法,当条件失败是执行b方法

通常我们会这样写:

var result;
if(isOk){
  result=funA();
}else{
 result=funB();
}

还可以这样表达:

 var result=isOk? funA():funB()

2、当条件成立执某个方法

通常方式:

 if(isOk){
     doSomething();
 }

我更喜欢这样写:

isOk&&doSomething();

如果一个变量没定义或没有值则给它一默认值

str=str||"ok";
arr=arr||[];

上面的方式可行,是因为在js逻辑运算中,返回值不一定是true或false,也可以是其他任何值,而且 0、""、null、false、undefined、NaN都会判为false,其他都为true。举例:

1&&"OK"  //表达式的值为字符串"OK",逻辑上被判定为 true
1||"OK"  //表达式的值为数字1,逻辑上被判定为 true
null||[]  //表达式的值为数组[],逻辑上被判定为 true
null&&[]  //表达式的值为null,逻辑上被判定为 false

3、当进行多个条件判段时

    给一个例子:每种颜色对应一个值,比如"white","red","green","yellow","gray","blue" 分别对应的值为0,1,2,3,4,5

1) 问题一:根据值获取颜色

实现方式一

?
function getColorByVal(val) {
     var color = "" ;
     if (val == 0){
         color = "white" ;
     } else if (val == 1) {
         color = "red" ;
     } else if (val == 2) {
         color = "green" ;
     } else if (val == 3) {
         color = "yellow" ;
     } else if (val == 4) {
         color = "gray" ;
     } else if (val == 5) {
         color = "blue" ;
     }
     return color;
}

实现方式二

复制代码
function getColorByVal(val) {
    var color;
    switch (val) {
        case 0:
            color = "white";
        case 1:
            color = "red";
            break;
        case 2:
            color = "green";
            break;
        case 3:
            color = "yellow";
            break;
        case 4:
            color = "gray";
            break;
        case 5:
            color = "blue";
            break;
             
    }
    return color;
}
复制代码

实现方式三

?
function getColorByVal(val) {
    return [ "white" , "red" , "green" , "yellow" , "gray" , "blue" ][val];
}

调用: var color=getColorByVal(2);

方式一和方式二相比没什么差别,但方式二稍微好一点,而方式三则是让人眼前一亮,短小精悍就完成了功能。不过有的人会说颜色的值刚好是数组下标,所以我们再来一题:

2) 问题二:根据颜色获取值

你可以用if 或switch 语句来完成,不过这里给出另外两种方式:

方式一:

复制代码
function getValByColor(color){
    var colors=["white","red","green","yellow","gray","blue"];
    var result;
     for(var i=colors.length-1;i--;){
        if(colors[i]==color){
            result=i;
            break;
        }
     }
     return result;
}
复制代码

方式二:

function getValByColor(color){
    return {"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}[color];
}

调用: var val=getValByColor("red");

对比一下很明显,方式二更简单而且易懂,巧妙在于构造一个对象,通过属性获取值,从而避开了繁琐的判断。


原文地址 http://www.cnblogs.com/lranye/archive/2013/06/08/3127013.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值