js中的&& ||运算符与if语句

这种&&、||运算符来写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。

原文地址:https://www.cnblogs.com/xipeiyang/p/4121107.html