JS 中的||(或运算)和&&(与运算)

本文详细解析了JavaScript中逻辑运算符&&与||的工作原理及应用场景,通过实例对比两种运算符的差异,帮助开发者更好地理解和使用。
 话说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://itworktor.blog.163.com/blog/static/175203029201078105625547/


### JavaScript 中逻辑运算符 `&&` `||` 的优先级 在 JavaScript 中,逻辑 (`&&`)运算优先级确实高于逻辑或 (`||`)。这意味着如果在一个表达式中同时存在 `&&` `||`,则会先计算 `&&` 表达式的部分[^1]。 #### 示例代码展示优先级 以下是几个例子来验证这一规则: ```javascript // 示例 1: 结合 && || console.log((true && false) || true); // 输出 true console.log(true && false || true); // 输出 true,因为 && 先被计算 // 示例 2: 更复杂的组合 console.log(false || true && false); // 输出 false,因为 && 优先于 || console.log((false || true) && false); // 输出 false,强制改变优先级 ``` #### 关于短路行为的说明 无论是 `&&` 还是 `||`,它们都遵循短路求值的原则。对于 `&&` 来说,一旦遇到左侧为假值,则不会继续评估右侧;而对于 `||`,只要左侧为真值就会跳过右侧[^3]。 - **逻辑 (`&&`)**:从左至右依次判断每个操作数是否为真值,直到发现第一个假值为止并立即返回它。 - **逻辑或 (`||`)**:同样是从左向右扫描各操作数,但是一旦碰到首个真值即刻终止后续检测过程,并将其作为整个表达式的结果予以反馈。 这种特性不仅影响性能优化还可能改变程序的行为模式因此理解清楚非常重要[^4]。 另外值得注意的是虽然 !(取反)具有更高的优先级别但是这并不意味着它可以随意嵌套使用而不考虑其他因素的影响所以实际编码过程中还是应该谨慎对待多重否定情况以免引起不必要的困惑或者错误[^5]。 ### 练习建议 为了更好地掌握这两个运算符及其相互作用关系可以通过下面这些题目来进行实践巩固所学知识点: 1. 计算下列各式最终得到什么结果? ```javascript let resultA = ('hello' && '') || 'world'; let resultB = (null || undefined) && NaN; ``` 2. 下面这段脚本运行之后变量x,y,z分别是什么样的状态呢? ```javascript const obj = { prop: null }; const x = obj.prop && typeof obj.prop === 'string'; const y = (!obj.prop || Array.isArray(obj)) ? [] : {}; const z = (({}).toString.call(y) === '[object Array]'); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值