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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
使用NestJS开发Node.js应用的方法
Dec 03 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
MutationObserver在页面水印实现起到的作用详解
Jul 07 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中使用Oracle数据库(5)
2006/10/09 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
loading动画特效小结
2017/01/22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
Python数据类型学习笔记
2016/01/13 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
利用python在excel中画图的实现方法
2020/03/17 Python
Python 爬虫性能相关总结
2020/08/03 Python
Python colormap库的安装和使用详情
2020/10/06 Python
五一手机促销方案
2014/03/08 职场文书
小学生环保标语
2014/06/13 职场文书
个人四风对照检查材料
2014/09/26 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
街道社区活动报告
2015/02/05 职场文书
刑事辩护词范文
2015/05/21 职场文书
让生命充满爱观后感
2015/06/08 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
生产实习心得体会范文
2016/01/22 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书