&& 与 || 的理解

&& 与 || 的理解

1.||

alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // falsealert(0||1);//1alert(2||1);//2alert(''||1);//1alert(0||'');//''

总结：
1、只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
2、只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

我称这种为短路原理： 知道了前面第一个的结果就知道后的输出，如果为第一个为：true，则取第一个的值，如果第一个为false，则取第二个的值。

在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true

经常有人问我，看到很多代码if(!!attr)，为什么不直接写if(attr)；
其实这是一种更严谨的写法， !!的作用是把一个其他类型的变量转成的bool类型。

typeof 5 //"number"typeof !!5 //"boolean"

2.&&

短路原理
1、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
2、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

用法：

//假设对成长速度显示规定如下：//成长速度为5显示1个箭头；//速度为10显示2个箭头；//成长速度为12显示3个箭头；//成长速度为15显示4个箭头；//其他都显示都显示0各箭头。//用代码怎么实现？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; }//写法2var 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;}//写法3(&&和||使用，简洁）var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;//写法4var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;//如果需求改成：//成长速度为>12显示4个箭头；//成长速度为>10显示3个箭头；//成长速度为>5显示2个箭头；//成长速度为>0显示1个箭头；//成长速度为<=0显示0个箭头。//那么用switch实现起来也很麻烦了。//那么你有没有想过用一行就代码实现呢？var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

翻译自http://www.jb51.net/article/21339.htm