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 cookies实现简单统计访问次数
Nov 24 Javascript
mailto的使用技巧分享
Dec 21 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
Node.js简单入门前传
Aug 21 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 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
Syphon 使用方法
2021/03/03 冲泡冲煮
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
谷歌浏览器调试JavaScript小技巧
2014/12/29 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
jQuery中$(function() {});问题详解
2015/08/10 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
Python logging模块学习笔记
2014/05/24 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
好邻里事迹材料
2014/01/16 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
监察建议书格式
2014/05/19 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
西安事变观后感
2015/06/12 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android