浅谈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 相关文章推荐
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
es6中reduce的基本使用方法
Sep 10 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
JS中一些高效的魔法运算符总结
May 06 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
PHP 多进程 解决难题
2009/06/22 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
javascript中的几个运算符
2007/06/29 Javascript
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
python实现教务管理系统
2018/03/12 Python
python使用turtle库绘制树
2018/06/25 Python
对Python中内置异常层次结构详解
2018/10/18 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Pycharm安装python库的方法
2020/11/24 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
机械工程师求职自我评价
2013/09/23 职场文书
建筑人员岗位职责
2013/12/25 职场文书
公益广告语集锦
2014/03/13 职场文书
产品质量承诺书范文
2014/03/27 职场文书
党员个人自我剖析材料
2014/10/08 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书