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写的实用看图工具实现代码
Jul 26 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 Javascript
详解jQuery中的easyui
Sep 02 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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预定义常量
2006/12/25 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
js post提交调用方法
2014/02/12 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python requests使用socks5的例子
2019/07/25 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python中删除某个元素的方法解析
2019/11/05 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
爱国主义演讲稿
2014/05/07 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
行政主管岗位职责
2015/02/03 职场文书
酒店开业主持词
2015/07/02 职场文书
初中班长竞选稿
2015/11/20 职场文书
情况说明书格式及范文
2019/06/24 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript