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定时器设定时间执行动作
Apr 02 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
javascript实现完美拖拽效果
May 06 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
js仿微信抢红包功能
Sep 25 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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-fpm的配置详解
2013/06/03 PHP
关于php循环跳出的问题
2013/07/01 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
使用PHP实现生成HTML静态页面
2015/11/18 PHP
cakephp常见知识点汇总
2017/02/24 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
javascript中 try catch用法
2015/08/16 Javascript
Javascript复制实例详解
2016/01/28 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
Vue内部渲染视图的方法
2019/09/02 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
详解Python正则表达式re模块
2019/03/19 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
体育老师的教学自我评价分享
2013/11/19 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
销售人员管理制度
2015/08/06 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
Java8中接口的新特性使用指南
2021/11/01 Java/Android