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中常用的函数和属性详细解析
Mar 07 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
JS库之ParticlesJS使用简介
Sep 12 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
详解JavaScript 的变量
Mar 08 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 Javascript
javascript中正则表达式语法详解
Aug 07 Javascript
React 高阶组件HOC用法归纳
Jun 13 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
Wordpress php 分页代码
2009/10/21 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
拖动一个HTML元素
2006/12/22 Javascript
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
详解JavaScript中的坐标和距离
2019/05/27 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
Python实现的Kmeans++算法实例
2014/04/26 Python
python中的变量如何开辟内存
2018/06/26 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
C#实现启动一个进程
2016/10/01 面试题
实体的生命周期
2013/08/31 面试题
J2EE模式面试题
2016/10/11 面试题
汽车专业人才自我鉴定范文
2013/12/29 职场文书
酒店经理职责
2014/01/30 职场文书
公证委托书大全
2014/04/04 职场文书
食品安全汇报材料
2014/08/18 职场文书
java设计模式--原型模式详解
2021/07/21 Java/Android
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
win7配置本地ftp服务器的图文教程
2022/08/05 Servers