JavaScript逻辑运算符相关总结


Posted in Javascript onSeptember 04, 2020

前言

关于 JavaScript 中的逻辑运算符,我们经常使用却可能不知道它的一些机制和用法。

机制

首先我们需要知道几种逻辑运算符的优先级是不同的(关于完整的运算符优先级,看运算符优先级),逻辑非>逻辑与>逻辑或>条件运算符(三目运算符)。运算顺序条件运算符是从右向左,而逻辑与和逻辑或都是从左向右。

//表达式的优先级导致结果不同
false && true || true   // 结果为 true
false && (true || true)   // 结果为 false

逻辑运算表达式返回的是字表达式的值,而不是一个 Boolean,只不过很多时候我们使用逻辑表达式的地方帮我们强制转换了,比如 if 语句等。

逻辑运算符通常用于布尔型(逻辑)值。这种情况下,它们返回一个布尔值。然而, && 和 || 运算符会返回一个指定操作数的值,因此,这些运算符也用于非布尔值。这时,它们也就会返回一个非布尔型值。

逻辑与 expression1 && expression2 的机制是,如果 expression1 能够转换为 true 那么返回 expression2 ,否则返回 expression1

逻辑或 expression1 || expression2 的机制是,如果 expression1 能够转化为 true 那么返回 expression1,否则返回 expression2

逻辑非 !expression ,若 expression 能够转化为 true 则返回 false,否则返回 true

expression 可能是任何一种类型, 不一定是布尔值。

会被转化为 false 的表达式有:

  • null
  • NaN
  • 0
  • 空字符串("" or '' or“` “ “`)
  • undefined

需要特别注意的是 undefined,有些表达式返回的是 undefined ,比如没有设置 return 的函数执行的返回值就是 undefined

尽管 && || 运算符能够使用非布尔值的操作数, 但它们依然可以被看作是布尔操作符,因为它们的返回值总是能够被转换为布尔值。如果要显式地将它们的返回值(或者表达式)转换为布尔值,请使用双重非运算符(即!!)或者 Boolean 构造函数。

双重非运算符 !! 可以将任意值强制转换为布尔值,在需要条件判断的地方经常使用。

短路计算

逻辑运算的机制还存在短路计算:

  • (some falsy expression1) && (expression2) 短路计算的结果为假。
  • (some truthy expression1) || (expression2) 短路计算的结果为真。

短路意味着上述表达式中的 expression2 部分不会被执行,因此 expression2 的任何副作用都不会生效(举个例子,如果 expression 是一次函数调用,这次调用就不会发生)。造成这种现象的原因是,整个表达式的值在第一个操作数被计算后已经确定了。

用法

利用 javascript 中逻辑运算符支持任意类型和短路计算的特性我们可以将逻辑运算符运用到一些特殊的地方。

逻辑与

逻辑与可以用来获得第一个假值,比如 expr1 && expr2 && expr3,当其中存在假值的时候会被返回。也可以类推至前面的表达式都为真的时候执行最后一个表达式来简化判断逻辑的代码,比如 x > 0 && a(),这可以代替 if 语句。

逻辑或

逻辑或可以用来设置默认值,比如你的函数需要用户输入一个参数,如果用户没有输入则给定一个默认值。this.a = param || {}

以上就是JavaScript逻辑运算符相关总结的详细内容,更多关于JavaScript逻辑运算符的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
js实现旋转木马效果
Mar 17 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
JS实现图片居中悬浮效果
Dec 25 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
JS实现多功能计算器
Oct 28 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
浅析JavaScript预编译和暗示全局变量
Sep 03 #Javascript
详解JavaScript作用域、作用域链和闭包的用法
Sep 03 #Javascript
JS变量提升及函数提升实例解析
Sep 03 #Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 #Javascript
Vue js with语句原理及用法解析
Sep 03 #Javascript
Vue通过provide inject实现组件通信
Sep 03 #Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
You might like
新的一年,新的期待:DC在2020年的四部动画电影
2020/01/01 欧美动漫
配置支持SSI
2006/11/25 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php实现监控varnish缓存服务器的状态
2014/12/30 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
Vue CLI3 开启gzip压缩文件的方式
2018/09/30 Javascript
js里面的变量范围分享
2020/07/18 Javascript
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python各类经纬度转换的实例代码
2019/08/08 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
python中树与树的表示知识点总结
2019/09/14 Python
python随机模块random使用方法详解
2020/02/14 Python
写出一个方法实现冒泡排序
2016/07/08 面试题
宾馆总经理岗位职责
2014/02/14 职场文书
建筑安全责任书范本
2014/07/24 职场文书
司考复习计划
2015/01/19 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
亮剑精神观后感
2015/06/05 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
详细介绍python类及类的用法
2021/05/31 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python