浅谈JS运算符&&和|| 及其优先级


Posted in Javascript onAugust 10, 2016

今天看了一段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代码,翻译一下:

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= 赋值、运算赋值
, 多重求值

以上这篇浅谈JS运算符&&和|| 及其优先级就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
web 页面分页打印的实现
Jun 22 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
iframe高度自适应及隐藏滚动条的实例详解
Sep 29 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
如何优雅地在Node应用中进行错误异常处理
Nov 25 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
Three.js学习之网格
Aug 10 #Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 #Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 #Javascript
最棒的Angular2表格控件
Aug 10 #Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
php中Array2xml类实现数组转化成XML实例
2014/12/08 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jquery ajax双击div可直接修改div中的内容
2016/03/04 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
JavaScript中的函数式编程详解
2020/08/22 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
python基础教程之基本数据类型和变量声明介绍
2014/08/29 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
pandas实现导出数据的四种方式
2020/12/13 Python
JPA面试常见问题
2016/11/14 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
白酒市场开发计划书
2014/01/09 职场文书
幼儿园教师节活动方案
2014/02/02 职场文书
公司委托书范本
2014/04/04 职场文书
我的祖国演讲稿
2014/05/04 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
暑假学习心得体会
2014/09/02 职场文书
大学毕业生自我评价
2015/03/02 职场文书
导游带团欢迎词
2015/09/30 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书