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进行表单验证实例分析
Feb 10 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
Sep 21 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
php+mongodb判断坐标是否在指定多边形区域内的实例
2016/10/28 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
python 模拟登陆github的示例
2020/12/04 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
linux面试题参考答案(4)
2013/01/28 面试题
应届护士推荐信
2013/11/16 职场文书
大学四年个人自我小结
2014/03/05 职场文书
大班亲子运动会方案
2014/06/10 职场文书
公司开业主持词
2015/07/02 职场文书
新学期开学标语2015
2015/07/16 职场文书
趣味运动会加油词
2015/07/18 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python