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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
初步了解javascript面向对象
Nov 09 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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 循环列出目录内容的函数代码
2010/05/26 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
电钳专业个人求职信
2014/01/04 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
四群教育工作实施方案
2014/03/26 职场文书
乡村文明行动实施方案
2014/03/29 职场文书
快餐公司创业计划书
2014/04/29 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
写景作文评语集锦
2014/12/25 职场文书
销售督导岗位职责
2015/04/10 职场文书
2015年小学数学教师工作总结
2015/05/20 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
深入理解python多线程编程
2021/04/18 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript