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获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
JavaScript网页定位详解
Jan 13 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
详解React中setState回调函数
Jun 14 Javascript
VSCode 配置uni-app的方法
Jul 11 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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 json_encode奇怪问题说明
2011/09/27 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
vue之a-table中实现清空选中的数据
2019/11/07 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python基于Tkinter实现的记事本实例
2015/06/17 Python
Python操作MySQL数据库的方法
2018/06/20 Python
基于python实现学生管理系统
2018/10/17 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
Django实现分页显示效果
2019/10/31 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
管理专员自荐信
2014/01/26 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
建筑安全标语
2014/06/07 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
会计专业自荐信范文
2015/03/05 职场文书
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Redis 限流器
2022/05/15 Redis