理解JS中 || 和 &&运算符

话说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 则它会继续看后面的条件是否为真，直到找到真值就立即返回，如果到最后也没找到真值，则返回最后一个值。