浅谈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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JS创建对象的写法示例
Nov 04 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
浅谈vue-props的default写不写有什么区别
Aug 09 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字符串函数学习之substr()
2015/03/27 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
理解和运用JavaScript的闭包机制
2015/08/13 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
Javascript blur与click冲突解决办法
2017/01/09 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python实现将内容分行输出
2015/11/05 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
wxPython的安装与使用教程
2018/08/31 Python
python 初始化一个定长的数组实例
2019/12/02 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
python 录制系统声音的示例
2020/12/21 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
Booking.com荷兰:全球酒店网上预订
2017/08/22 全球购物
优秀党员先进材料
2014/12/18 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL