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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
js替代copy(示例代码)
Nov 27 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
javascript条件式访问属性和箭头函数介绍
Nov 17 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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
js异或加解密效果代码
2008/06/25 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
判断数组的最佳方法(推荐)
2016/10/11 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
vue.js数据绑定操作详解
2018/04/23 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
Python中qutip用法示例详解
2020/10/02 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
优秀共青团员事迹材料
2014/12/25 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python