浅谈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源码]超长文章自动分页(客户端版)
Jan 09 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
理解javascript中的严格模式
Feb 01 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
详解js创建对象的几种方式和对象方法
Mar 01 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP5.5迭代生成器用法实例详解
2016/03/16 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
vue filters的使用详解
2018/06/11 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
js实现日历
2020/11/07 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
利用python爬取散文网的文章实例教程
2017/06/18 Python
Python 多进程和数据传递的理解
2017/10/09 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Pycharm修改python路径过程图解
2020/05/22 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
经典c++面试题五
2014/12/17 面试题
生日宴会答谢词
2014/01/09 职场文书
12岁生日感言
2014/01/21 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
2015年司法所工作总结
2015/04/27 职场文书
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
MySQL创建管理子分区
2022/04/13 MySQL