JavaScript精简代码 非一般的写法(转载)

摘要:最近在编写一个前端模块功能,编写了大量的代码,其中一般图片特效展示是参考别人的代码来写的,发现有些代码似乎看得明白又好像不确定是不是哪个意思,所以在网上问了一下程序员们,原来是JS代码简写。

转自:http://www.lezhu99.com/2382.html

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。举例:

JavaScript精简代码 非一般的写法(转载)
1&&"OK"  //表达式的值为字符串"OK",逻辑上被判定为 true 
1||"OK"  //表达式的值为数字1,逻辑上被判定为 true 
null||[]  //表达式的值为数组[],逻辑上被判定为 true 
null&&[]  //表达式的值为null,逻辑上被判定为 false
JavaScript精简代码 非一般的写法(转载)

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

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

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

实现方式一

JavaScript精简代码 非一般的写法(转载)
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; 
}
JavaScript精简代码 非一般的写法(转载)

实现方式二

JavaScript精简代码 非一般的写法(转载)
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; 
}
JavaScript精简代码 非一般的写法(转载)

实现方式三

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

调用: var color=getColorByVal(2);

方式一和方式二相比没什么差别,但方式二稍微好一点,而方式三则是让人眼前一亮,短小精悍

就完成了功能。不过有的人会说颜色的值刚好是数组下标,所以我们再来一题:

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

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

方式一:

JavaScript精简代码 非一般的写法(转载)
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; 
}
JavaScript精简代码 非一般的写法(转载)

方式二:

JavaScript精简代码 非一般的写法(转载)
function getValByColor(color){
    return {"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}[color]; 
}
JavaScript精简代码 非一般的写法(转载)

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

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

4、交换两个变量的值

通常是这样实现的:

var temp=0,a=5,b=10;
temp=a; 
a=b; 
b=temp;

不过还可以更巧一些:

var a=5,b=10;
a=[b,b=a][0];

a=[b,b=a][0] 执行过程:先执行数组里两个表达式b和b=a,作用是把5赋值给b并产生一个数组[10,5] ,然后 a=[10,5][0]即 a=10,这样就完成了交换,不过也借助了无名的数组,但看起来好想没借助第三个变量,不过不提倡这样做,毕竟第一种方式更易懂。

5、获取对象的属性

方式一

JavaScript精简代码 非一般的写法(转载)
var arr=[],i=0;
var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; 
for(var key in colors){ 
   arr[i++]=key; 
}
JavaScript精简代码 非一般的写法(转载)

方式二

JavaScript精简代码 非一般的写法(转载)
var arr=[],i=0;
var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; 
for(arr[i++] in colors);
JavaScript精简代码 非一般的写法(转载)

两种方式都得到了对象colors的属性(arr=["white", "red", "green", "yellow", "gray", "blue"]), 第二种方式不过搭了 for in 语句的顺风车。方式一中for in语句依次从colors获取一个属性赋值给key,只不过在方式二中赋值给了arr[i++]。这个纯粹是为了好玩,享受编程的乐趣也是编程的一部分吧。

JavaScript精简代码 非一般的写法(转载)

上一篇:WPF/Silverlight深度解决方案:(一)解锁被Storyboard束缚的关联属性


下一篇:PHP的session存储对PHP运行环境的影响