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 相关文章推荐
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
Html5生成验证码的示例代码
May 10 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
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
纯js的右下角弹窗实例
2017/03/12 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
javaScript中的空值和假值
2017/12/18 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
python switch 实现多分支选择功能
2020/12/21 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
医生实习工作总结的自我评价
2013/09/27 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
学习标兵获奖感言
2014/02/20 职场文书
本科毕业生求职信
2014/06/15 职场文书
2019年个人工作总结范文
2019/03/25 职场文书