浅谈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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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
Laravel5中contracts详解
2015/03/02 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
详解Python编程中time模块的使用
2015/11/20 Python
Python判断两个对象相等的原理
2017/12/12 Python
详解python中list的使用
2019/03/15 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python 去除字符串中指定字符串
2020/03/05 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
销售总监工作职责
2013/11/21 职场文书
交通事故协议书范文
2014/04/16 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
法人代表证明书格式
2014/10/01 职场文书
建筑横幅标语
2014/10/09 职场文书
工作自我推荐信范文
2015/03/25 职场文书
就业意向书范本
2015/05/11 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Go语言测试库testify使用学习
2022/07/23 Golang