js中的&& ||运算符与if语句
浏览数：29 /
时间：2015年06月09日
这种&&、||运算符来写if语句在某些人口中也被称为是短路写法。最初在网上学习这种写法时，看到了一个例子：
var add_level = 0;
if(add_step == 5){
add_level = 1;
}
else if(add_step == 10){
add_level = 2;
}
else if(add_step == 12){
add_level = 3;
}
else if(add_step == 15){
add_level = 4;
}
else {
add_level = 0;
}
这种if else语句是最长见的写法，也是最为简单易懂的写法，但缺点是代码太多了。
于是可以使用switch语句：
var add_level = 0;
switch(add_step){
case 5 : add_level = 1;
break;
case 10 : add_level = 2;
break;
case 12 : add_level = 3;
break;
case 15 : add_level = 4;
break;
default : add_level = 0;
break;
其实switch语句已经非常的精简了，如果把其中的add_step==15，这种 “=” 条件改为 “>” 这种不等条件，那么switch语句就无法实现了。
接下来我们再来看看&&、||运算符的写法：
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
非常的精简，只用了一行代码就实现了。
是这段代码，或者说是这个例子让&&||运算符写法进入了我的眼球。但也同样这这个例子，让我在理解这种写法时走了不少弯路。
看完这个例子后，我曾经一度的以为 &&前的内容是if()内的判断条件，后面的则是条件成立后的执行代码，而||则代表着else{}。
这是大错特错，下面我就来讲一下，&&、||运算符的本质：
就拿下面这段代码来说 var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;
这其实就是在进行 ”与“ ”或“判断。
首先从左向右进行判断，如果add_step==5运行结果为true，那就是true&&1，结果就是1，被判断为真(但因为是作为数字赋值给变量，所以虽然被判断为真，但却不会被转换为true)。
而后面接的又是||运算符，当前面被判断为真时就不会再向后进行运算。所以最后的结果就是1，然后被赋值给add_step。
而如果add_step==5运算结果为false，则add_step==5&&1整个就是false，那么就会通过后面的||运算符 继续向后运算，向后面找。
这就给了人一种类似于if(){}else{}语句的错觉。其实这两种写法，只是最后的运算结果是一样的，但是运算的原理确实不同的。
运算符写法，虽然非常的简洁，精炼。但是其中包含的逻辑却非常的复杂。一般不会大量的用来开发，因为很有可能过了一段时间，你自己都在短时间内看不懂，更不要说让别人来维护了。
但是下面这段代码却是例外。经常使用，非常的方便有效，能很好的解决命名重复的问题。
var YAHOO = window.YAHOO || {};
这是雅虎官网处理js命名空间的语句。该写法，目前在很多网站还比较流行且频繁出现。
YAHOO是个变量，|| 关系运算符相当于一个if语句。
如果window.YAHOO已经定义，则YAHOO = window.YAHOO,否则YAHOO={};
{}是 new Object()的简写。
var YAHOO = {}; 就是声明一个 “对象级的变量” YAHOO。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
