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 相关文章推荐
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
学习Angularjs分页指令
Jul 01 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
Mar 06 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
详解Node.JS模块 process
Aug 31 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
Session的工作方式
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
layui导航栏实现代码
2017/05/19 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
一款纯css3实现的竖形二级导航的实例教程
2014/12/11 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
自我鉴定200字
2013/10/28 职场文书
开会迟到检讨书
2014/02/03 职场文书
七夕情人节促销方案
2014/06/07 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
感谢信的技巧及范例
2019/05/15 职场文书