js : nice explain of || and &&

最新推荐文章于 2024-09-16 20:08:29 发布

nedwons

最新推荐文章于 2024-09-16 20:08:29 发布

阅读量173

点赞数

文章标签： javascript

thanks to the athour:http://blog.csdn.net/xiejianghui_/article/details/38314497

话说JS里的 || 和 && 运算符一直对它都是云里雾里，虽然以前曾对它有过一些研究，但是时间久了，又未曾怎么实践，所以还是忘记了，最近这段时间拿起ExtJS框架里的源码分析。到处都是这种逻辑表达式，所以决定再仔细研究一番。

一、先说 && 运算符
&&运算符
       从对其它语言的了解，表达的意思就是把多个逻辑条件连接起来确定真假，如果连接的条件有一个为假，则返回假。其实JS里的&&运算符也是这个意思。在JS里，任何类型的值都可以转换成逻辑布尔值如：
  对象                 ==》 true
  非空字符串      ==》 true
  非0数字           ==》 true
  true                  ==》 true

   ""                     ==》 false
  null                  ==》 false
  undefined       ==》 false
  false               ==》 false
  NaN                ==》 false
  0                     ==》 false
例如：
var a1 =   "aa";
var a2 =   "bb";
var a3 =   "cc";
var aa = a1 && a2 && a3;   //3个条件连接起来判断真假，都为真则返回最后一个值。
alert(aa);  //返回a3
经过分析
如果3个条件都为真，则返回第三个值
如果3个条件都为假，则返回第一个值，由于短路算法，从左到右发现第一个值为假，第二个值和第三个值都会被忽略。
如果只是其中一个为假，则返回假的那个值，根据短路算法，后面的值被忽略.

var aa = a1 && a2 && a3;
上面的逻辑其实表达的意思如下：
  if(!a1)        a1没有意义返回a1
      alert(a1);
   else if(!a2)   a2也没有意义返回a2
      alert(a2);
  else if(!a3)  a3也没有意义返回a3
      alert(a3);
  else
       alert(a3); //都有意义返回最后一个a3

二、再说 ||  运算符
      理解了前面的&&运算符，再来理解这个运算符就简单多了，它表达的意思是，如果要使表达式有意义，从左到右只要发现有一个有意义则整个表达式都有意义，并返回这个有意义的值，如果都是没意义的值，则返回最后那个值。
  var a1 =   null;
   var a2 =   NaN;
   var a3 =  undefined;
   var aa = a1 || a2 || a3;
   alert(aa); //返回“undefined"
经过分析
如果其中3个条件都是真，则返回第一个为真的值，根据短路算法，第二个值和第三个值都会被忽略，因为第一个值已经决定了结果。
如果只有其中一个为真，则返回为真的那个值. 后面的条件都将忽略。
var aa = a1 && a2 && a3;
如果用if来表示如下：
if(a1)
   alert(a1);
else
{
  if(a2)
  {
    alert(a2);
  }
else
    alert(a3);
}
JS中经常用|| 运算符来做逻辑判断。如：
var a = false;
var b = [1,2,3];
var aa = a || b   //如果第一个值没有意义就返回第二个，否则返回第一个
表达的意思如下：
if(a == null)
alert(b);
else
alert(a);
其等价于c#里的:
string a == null ? b : a

再区别一下如下的代码：
var a = undefined;
var b =[1,2,3];

var c = (a==undefined) &&  b   //如果a没有初始化，则用b来代替初始化
var d = a || b                                // 如果a等于false，则用b来代替
alert(c); //返回1，2，3
alert(d); //返回1，2，3

三、最后总结一下， && 和|| 运算符的区别：
1.两者都是计算连接条件的真假，最后来确定值，都是从false开始测试的。
2.对于&&  如果第一个值是false 则整个表达式都是false 并返回第一个值，后面的条件都将忽略。
3.对于||  如果第一个值是false 则它会继续看后面的条件是否为真，直到找到真值就立即返回，如果到最后也没找到真值，则返回最后一个值。

http://blog.csdn.net/zzqworkspace/article/details/68583132

今天看了一段YUI compressor压缩的js代码：

userNum && (ind += index,ind >= userNum && (ind -= userNum),ind < 0 && (ind === -2 && (ind = -1),ind += userNum),selLi.removeClass("on"),$(selLi[ind]).addClass("on"));

直接疯掉了，估计一下子没几个人能看懂。那么就把他“翻译”一下。

&& (逻辑与)

这里主要是一个“&&”运算，首先要搞懂这个，看一个简单的例子：

1 var a = 1 && 2 && 3;//3

2 var b = 0 && 1 && 2;//0

3 var c = 1 && 0 && 2;//0

4 alert(a),alert(b),alert(c);

嘿嘿，写法很奇怪，运行的结果是3，0，0。一般我们在if语句中经常用到。“&&” (逻辑与) 运算和“||”运算真好相反，“&&” 运算遇到false就返回。

例如： a && b ,如果 a 为true，直接返回b，而不管b为true或者false 。如果 a 为false 那么直接返回a，上面例子中第一个var a = 1 && 2 && 3;因为1 && 2，1为真，返回2；2&&3， 2为真，返回3 。

搞懂了“&&” 运算，再来看最上的面的YUI compressor压缩的js代码，翻译一下：

[js] view plain copy

if(userNum){
ind+=index;
if(ind>=userNum){
ind-=userNum;
}
if(ind < 0){
if(ind === -2){
ind = -1;
}
ind += userNum;
}
selLi.removeClass("on");
$(selLi[ind]).addClass("on");
}

说来惭愧，年纪大了，足足“翻译”了半个小时，还是在同事的帮助下才“翻译”正确。

||（逻辑或）

再来看看“||”（逻辑或）运算，看例子：

1 var a = 0 || 1 || 2;//1

2 var b = 1 || 0 || 3;//1

3 alert(a),alert(b);

“||”运算遇到true就返回。例如：a || b ,如果 a 为false，直接返回b，而不管b为true或者false 。如果 a 为true，直接返回a，而不会继续往下执行。

&& (逻辑与) 和||（逻辑或）混合使用的时候要注意他们的优先级：

&& (逻辑与) 优先级高于||（逻辑或）

return a && b || c ,

根据a来判断返回值，a 是 false 则肯定返回 c；如果 b , c 都是 true ，那么我们就可以根据 a 来决定b 还是 c ，如果 a 是 false 则返回 c，如果a是true 则返回 b。

return a || b && c

根据优先级相当于先算 b && c ,然后和a 相或；如果a是true，则返回a，不论是b或c，如果a是false，则如果b是false，返回b，如果b是true，返回c；

1 var a = 3 && 0 || 2; //2

3 var b = 3 || 0 && 2; // 3

5 var c= 0 || 2 && 3; // 3

6 alert(a),alert(b),alert(c);

另附：JS运算符优先级（从高到低列出)

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
\|	按位或
&&	逻辑与
\|\|	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值