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 相关文章推荐
window.onload 加载完毕的问题及解决方案(下)
Jul 09 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
js在HTML的三种引用方式详解
Aug 29 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
redirect_uri参数错误的解决方法(必看)
2017/02/16 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
Javascript & DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
javascript OFFICE控件测试代码
2009/12/08 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
JS实现日期加减的方法
2013/11/29 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python中解析json格式文件的方法示例
2017/05/03 Python
Python 对象中的数据类型
2017/05/13 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
2014年机关工会工作总结
2014/12/19 职场文书
主持人大赛开场白
2015/05/29 职场文书
永不妥协观后感
2015/06/10 职场文书
欠条样本
2015/07/03 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书