JavaScript精简代码 非一般的写法

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

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

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

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

您还可以这样表达：

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

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

通常定法：

if (isOk) {      doSomething(); }
 
if (isOk) {      doSomething(); }

我更喜欢这样写：

isOk && doSomething();
 
isOk && doSomething();

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

str=str||"ok"; arr=arr||[];
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
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 = "";     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) {     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]; }
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){    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]; }
function getValByColor(color){    return {"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}[color]; }

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

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

4、交换两个变量的值

通常是这样实现的：

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

不过还可以更巧一些：

var a=5,b=10;a=[b,b=a][0];
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、获取对象的属性

方式一

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; }
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; }

方式二

var arr=[],i=0;var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; for(arr[i++] in colors);
var arr=[],i=0;var colors={"white":0,"red":1,"green":2,"yellow":3,"gray":4,"blue":5}; for(arr[i++] in colors);

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