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 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
JQuery datepicker 用法详解
Dec 25 Javascript
详谈javascript异步编程
Feb 21 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
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获取url的函数代码
2011/08/02 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
jQuery Ajax 全解析
2009/02/08 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
Python中的map、reduce和filter浅析
2014/04/26 Python
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
你常见到的runtime exception
2016/09/05 面试题
白血病捐款倡议书
2014/05/14 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
社区文明倡议书
2015/04/28 职场文书
windows系统搭建WEB服务器详细教程
2022/08/05 Servers