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 相关文章推荐
JavaScript去掉数组中的重复元素
Jan 13 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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+DBM的同学录程序(3)
2006/10/09 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
JavaScript的面向对象(一)
2006/11/09 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
深入探讨前端框架react
2015/12/09 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
2016/03/31 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
python之文件读取一行一行的方法
2018/07/12 Python
python pygame实现2048游戏
2018/11/20 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
历史专业毕业生的自我鉴定
2013/11/15 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
致接力运动员加油稿
2015/07/21 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL