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的获取JS文件中的字符串内容
Feb 14 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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中去除所有js,html,css代码
2010/10/12 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
Python自定义主从分布式架构实例分析
2016/09/19 Python
为什么Python中没有"a++"这种写法
2018/11/27 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
小学班级口号
2014/06/09 职场文书
商务经理岗位职责
2014/08/03 职场文书
迎新生欢迎词
2015/01/23 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
七年级话题作文之执着
2019/11/19 职场文书