浅谈javascript中的 “ && ” 和 “ || ”


Posted in Javascript onFebruary 02, 2017

有时候,我们会在jQuery框架或者其他js插件中发现里面有很多 “ && ” 和 “ || ”,那么这两个标识到底是什么含义?怎么使用?我觉得还是有必要稍微深究一下。

一、原理:

&& 操作符特点:逻辑运算表达式中只要一个是false就取false的值,都是true取后面,都是false取前面。

|| 操作符特点:逻辑运算表达式中只要一个是true就取true的值,都是true取前面,都是false取后面。

在js逻辑运算中,我们知道 0、""、null、false、undefined、NaN 这五种数据类型是会被判断为false的。那么,我们在进行js的逻辑运算过程中,就可以根据上面的原理以及这五种数据类型来进行相应的判断处理。直接上DEMO...

二、原始DEMO:

先亮出问题!!!

如果我们要根据学生的成绩来判断等级,比如:90分表示A,80分表示B,60分表示C,其他表示D。

那么我们可以这么做:

JS代码:

var score = 90;
var grade = '';
if(score === 90){
 grade = "A";
}else if(score === 80){
 grade = "B";
}else if(score === 60){
 grade = "C";
}else{
 grade = "D";
}
console.log("当前学生等级为:" + grade); // 当前学生等级为:A

或者这样:

var score = 90;
var grade = '';
switch(score){
 case 90:
 grade = "A";
 break;
 case 80:
 grade = "B";
 break;
 case 60:
 grade = "C";
 break;
 default:
 grade = "D";
 break;
};
console.log("当前学生等级为:" + grade); // 当前学生等级为:A

三、优化DEMO:

其实,如果我们用 “ && ” 和 “ || ” 的话,大可不必如上面那么麻烦。

var score = 90;
var grade = (score===90 && 'A') || (score===80 && 'B') || (score===60 && 'C') || 'D';
console.log("当前学生等级为:" + grade); // 当前学生等级为:A

上面代码可以这么理解:

如果score的值等于90,那么score===90的逻辑表达式就成立(也即是true),就会执行到后面 'A' 的赋值操作,同时后面的“||” 逻辑运算也可以忽略(因为“||”运算符的特点是前面一旦为true,后面就没有执行的必要了)。

如果score的值不等于90,那么score===90的逻辑表达式就不成立(也即是false),根据“&&”操作符的特点,我们知道“(score===90 && 'A')”这段代码就不会执行到后面 'A' 的赋值操作,同时由于“(score===90 && 'A')”这段代码整体是false,那么根据“||”的特点,整个逻辑表达式会继续往后执行。

以此类推,如果前面所有的逻辑表达式都不成立,那么根据“||”的特点(全部为false就取最后面的),最后的grade赋值就会是“D”。

我们还可以用JSON形式来处理上面的逻辑运算:

var score = 90;
var grade = {90:"A", 80:"B", 60:"C"}[score] || 'D';
console.log("当前学生等级为:" + grade); // 当前学生等级为:A

这里利用了JSON对象的属性读取,当“JSON对象.属性值”存在的时候(为true),就会取得对应属性的key值(A、B或者C)。当score属性值不存在与JSON对象中的时候,就会执行“||”后面的内容,也就是把grade赋值为“D”。

当然,我们会发现上面的数值比较并没有太大的实用性,比如当学生的成绩在85分的时候,等级也会变成“D”,这明显是不合适的!!!

所以我们可以把上面的代码再优化下,把数值的 “相等比较” 改成 “范围区间比较” 。

var score = 85;
var grade = (score>=90 && 'A') || (score>=80 && 'B') || (score>=60 && 'C') || 'D';
console.log("当前学生等级为:" + grade); // 当前学生等级为:B

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
JS中检测数据类型的几种方式及优缺点小结
Dec 12 Javascript
Bootstrap风格的zTree右键菜单
Feb 17 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
Javascript中的 “&” 和 “|” 详解
Feb 02 #Javascript
javascript实现简易计算器
Feb 01 #Javascript
javascript实现右下角广告框效果
Feb 01 #Javascript
基于javascript实现最简单选项卡切换
Feb 01 #Javascript
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
JS实现深度优先搜索求解两点间最短路径
2019/01/17 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python 第三方库的安装及pip的使用详解
2017/05/11 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
django静态文件加载的方法
2018/05/20 Python
朴素贝叶斯Python实例及解析
2018/11/19 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
如何基于Python制作有道翻译小工具
2019/12/16 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
美国眼镜网站:LensCrafters
2020/01/19 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
教师对学生的评语
2014/04/28 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
法律服务所工作总结
2015/08/10 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python