javascript运算符——逻辑运算符全面解析


Posted in Javascript onJune 27, 2016

前面的话

逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用。逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式。逻辑运算符分为逻辑非'!'、逻辑与'&&'、逻辑或'||'3种,本文将介绍这三种逻辑运算符

逻辑非

逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值。无论这个值是什么数据类型,这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反

逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同,只不过最后再将其结果取反。而如果同时使用两个逻辑非操作符,实际上就会模拟Boolean()转型函数的行为

console.log(!!undefined);//false
console.log(!!null);//false
console.log(!!0);//false
console.log(!!-0);//false
console.log(!!NaN);//false
console.log(!!'');//false
console.log(!!false);//false
console.log(!!{});//true
console.log(!![]);//true

console.log(!!new Boolean(false));//true
console.log(!!false);//false
console.log(!!new Boolean(null));//true
console.log(!!null);//false

逻辑非运算符常常用于控制循环

//Boolean 变量(bFound)用于记录检索是否成功。找到问题中的数据项时,bFound 将被设置为true,!bFound将等于false,意味着运行将跳出while循环
var bFound = false;
var i = 0;
while (!bFound) {
 if (aValue[i] == vSearchValues) {
  bFound = true;
 } else {
  i++;
 }
}

逻辑与

逻辑与运算符由两个和号(&&)表示,有两个操作数,只有在两个操作数都为true时,结果才返回true,否则返回false

//逻辑与(&&)的真值表
第一个操作数    第二个操作数    结果
true       true        true
true       false       false
false       true        false
false       false       alse

逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑与操作不一定返回布尔值

逻辑与操作属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值

对于逻辑与而言,如果第一个操作数是false,则无论第二个操作数是什么值,结果都是false,则返回第一个操作数;如果第一个操作数为true,则结果的真假和第二个操作数的真假相同,则返回第二个操作数

//除了false、undefined、null、+0、-0、NaN、''这7个假值,其余都是真值
console.log('t' && ''); //因为't'是真值,所以返回''
console.log('t' && 'f'); //因为't'是真值,所以返回'f'
console.log('t' && 1 + 2); //因为't'是真值,所以返回3
console.log('' && 'f'); //因为''是假值,所以返回''
console.log('' && ''); //因为''是假值,所以返回''
var i = 1;
var result = (true && i++);
console.log(result,i);//因为true是真值,所以执行i++,i是2,result是1

var i = 1;
var result = (false && i++);
console.log(result,i);//因为false是假值,所以不执行i++,i是1,result是false

逻辑与运算符可以多个连用,返回第一个布尔值为false的表达式的值

console.log(true && 'foo' && '' && 4 && 'foo' && true);// ''

关系运算符的优先级比逻辑与(&&)和逻辑或(||)的优先级高,所以类似表达式可以直接书写,不用补充圆括号

if(a+1==2 && b+2==3){
  //Todo  
}

可以使用逻辑与运算符来取代if结构

if (a == b) {
 doSomething();
}
// 等价于
(a == b) && doSomething();

逻辑与运算符常常用于回调函数使用中

//若没有给参数a传值,则a为默认的undefined,是假值,所以不执行a(),防止报错,如果给参数a传值,则执行函数a()
function fn(a){
  if(a){
    a();
  }
}
//等价于
function fn(a){
  a && a();
}

逻辑或

逻辑或运算符由两个竖线(||)表示,有两个操作数,只有在两个操作数都是false时,结果才返回false,否则返回true

//逻辑或(||)的真值表
第一个操作数    第二个操作数    结果
true       true       true
true       false       true
false       true       true
false       false       false

同样地,逻辑或操作也可以应用于任何类型的操作数,而不仅仅是布尔值。如果其中一个操作数不是布尔值,则逻辑或操作不一定返回布尔值

逻辑或操作也属于短路操作,如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值

对于逻辑或而言,如果第一个操作数是true,则无论第二个操作数是什么值,结果都是true,则返回第一个操作数;如果第一个操作数是fales,则结果的真假和第二个操作数的真假相同,则返回第二个操作数

console.log('t' || '');//因为't'是真值,所以返回"t"
console.log('t' || 'f');//因为't'是真值,所以返回"t"
console.log('' || 'f');//因为''是假值,所以返回"f"
console.log('' || '');//因为''是假值,所以返回""
var i = 1;
var result = (true || i++);
console.log(result,i);//因为true是真值,所以不执行i++,result是true,i是1

var i = 1;
var result = (false || i++);
console.log(result,i);//因为false是假值,所以执行i++,i是2,result是1

同样地,逻辑或运算符也可以多个连用,返回第一个布尔值为true的表达式的值

console.log(false || 0 || '' || 4 || 'foo' || true);// 4

逻辑或运算符常用于为变量设置默认值

//如果没有向参数p传入任何对象,则将该参数默认设置为空对象
function fn(p){
  p = p || {};
}

以上就是小编为大家带来的javascript运算符——逻辑运算符全面解析全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
使用vue.js制作分页组件
Jun 27 #Javascript
js编写一个简单的产品放大效果代码
Jun 27 #Javascript
用JS实现轮播图效果(二)
Jun 26 #Javascript
用JS实现图片轮播效果代码(一)
Jun 26 #Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 #Javascript
jQuery滚动新闻实现代码
Jun 26 #Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
You might like
用PHP读取RSS feed的代码
2008/08/01 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python 静态方法和类方法实例分析
2019/11/21 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
python爬虫用mongodb的理由
2020/07/28 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
市优秀教师事迹材料
2014/02/05 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
班主任2015新年寄语
2014/12/08 职场文书
委托书英文
2015/01/28 职场文书
暑假安全保证书
2015/02/28 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS