JS中的 && 、|| 、??、?. 运算符
javascript有不少好用的运算符,合理的使用可以大大提高工作效率,以下简单介绍了4种,具体如下:
&&
逻辑与运算(&&
)是 AND 布尔操作。只有两个操作数都为 true
时,才返回 true
,否则返回 false
。具体描述如表所示:
条件一 | 条件二 | 结果 | 演示 |
---|---|---|---|
true1 | true2 | true2 | 1 && 2 => 2 |
true | false | false | 1 && 0 => 0 |
false | true | false | 0 && 1 => 0 |
false1 | false2 | false1 | null && 0 => null |
逻辑与是一种短路逻辑,如果左侧表达式为 false
,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:
- 计算第一个操作数(左侧表达式)的值。
- 检测第一个操作数的值。如果左侧表达式的值可转换为
false
(如null
、undefined
、NaN
、0
、""
、false
),那么就会结束运算,直接返回第一个操作数的值。 - 如果第一个操作数可以转换为
true
,则计算第二个操作数(右侧表达式)的值。 - 返回第二个操作数的值。
实例:
let a = 10
(a > 5) && console.log('哈哈哈'); // 哈哈
等效于:
if(x> 5) {
console.log('哈哈');
}
||
逻辑或运算(||
)是布尔 OR 操作。如果两个操作数都为 true
,或者其中一个为 true
,就返回 true
,否则就返回 false
。具体如图所示:
条件一 | 条件二 | 结果 | 演示 |
---|---|---|---|
true | true | true | 1 || 2 => 1 |
true | false | true | 1 || 0 => 1 |
false | true | true | 0 || 2 => 2 |
false1 | false2 | false2 | 0 || undefined=> undefined |
逻辑或也是一种短路逻辑,如果左侧表达式为 true
,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:
- 计算第一个操作数(左侧表达式)的值。
- 检测第一个操作数的值。如果左侧表达式的值可转换为
true
,那么就会结束运算,直接返回第一个操作数的值。 - 如果第一个操作数可以转换为
false
,则计算第二个操作数(右侧表达式)的值。 - 返回第二个操作数的值。
??
空值合并运算符( ?? )是一个逻辑操作符,如果左侧的表达式为 null
或者 undefined
时,返回其右侧表达式,否则返回左侧表达式。
下列表格中的true、false 表示除null undefined 之外任意
条件一 | 条件二 | 结果 | 演示 |
---|---|---|---|
null | 1 | 1 | null ?? 1 => 1 |
undefined | 2 | 2 | undefined ?? 2 => 2 |
true | false | true | true ?? false => true |
?.
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。( ?. ) 操作符的功能类似于( . )链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。
const obj={
name:'张三',
age:12
}
console.log(obj ?. name); // 张三
console.log(obj ?. xxxxx); // undefined
下表承接上面数据:
条件一 | 条件二 | 结果 | 演示| |
---|---|---|---|
obj(存在) | name | 张三 | obj ?. name =>张三 |
obj(不存在) | xxxx | undefined | obj ?. xxxxx =>undefined |
JS中的 && 、|| 、??、?. 运算符的更多相关文章
- js中的运算符和条件语句
js中的运算符大体上可以分为4类:1算术运算符.2一元操作符.3比较运算符.4逻辑运算符. 算术运算符一般指的是加减乘除求余这五种操作符:+,-,*,/,%.通过算术运算符可以对js中的变量进行操作. ...
- JavaScript 基础——使用js的三种方式,js中的变量,js中的输出语句,js中的运算符;js中的分支结构
JavaScript 1.是什么:基于浏览器 基于(面向)对象 事件驱动 脚本语言 2.作用:表单验证,减轻服务器压力 添加野面动画效果 动态更改页面内容 Ajax网络请求 () 3.组成部分:ECM ...
- JS中的运算符和JS中的分支结构
JS中的运算符 1.算术运算(单目运算符) + .-.*. /. %取余.++自增 .--自减 +:两种作用,链接字符串/加法运算.当+两边全为数字时,进行加法运算:当+两边有任意一边为字符串时,起链 ...
- 让你彻底搞懂JS中复杂运算符==
让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...
- JS中的运算符_函数学习
js中的运算符: 算数运算符: + - * / % ++ -- 逻辑运算符: & | ! && || < > <= ...
- js中的运算符优先级顺序
js中运算符优先级从高到底的顺序: 算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号
- JS中的运算符 以及变量和输入输出
1.算术运算(单目运算符) + 加 .- 减.* 乘. / 除. % 取余.++ 自增.-- 自减. >>> +:有两种作用,链接字符串/加法运算,当+两边全为数字时,进行加法运算, ...
- 浅谈JS中逗号运算符的用法
阅读本文的前提是,你能区分什么是表达式,什么是语句.还有明确运算符和运算数都是些啥东西.所谓的表达式就是一个JavaScript的"短语",JavaScript的解释器可以计算它, ...
- JS中短路运算符&&和||
在JS函数中我们经常会使用到短路运算符,主要是逻辑与(&&) 和 逻辑或(||) 1.逻辑与 && 的运算方式 var a = 5 && 6; cons ...
- JS中new运算符的实现原理
当我们用new运算符new一个构造函数产生一个实例时,比如说: var obj = new Func 时,其背后的步骤是这样的: 1:创建一个继承自 Func.prototype 的新对象:2:执行构 ...
随机推荐
- spring 支持哪些 ORM 框架 ?
Hibernate iBatis JPA JDO OJB
- 区分构造函数注入和 setter 注入?
构造函数注入 setter 注入 没有部分注入 有部分注入 不会覆盖 setter 属性 会覆盖 setter 属性 任意修改都会创建一个新实例 任意修改不会创建一个新实例 适用于设置很多属性 适用于 ...
- read,readline,readlines的特点与区别
1.read 读取全部文件 with open("test.text", "r",encoding='utf8') as f: print(f.read()) ...
- ArrayList跟LinkedList的区别
ArrayList和LinkedList都是实现list接口,它们不同如下: ArrayList是基于索引的数据接口,底层是数组.它可以以O(1)时间复杂度对元素进行随机访问.与此相对,linkedL ...
- pygame.error: video system not initialized
在pygame写游戏出现pygame.error: video system not initialized 源代码 import sysimport pygamedef run_game(): py ...
- 在 VC 下清空键盘缓冲区的方法
控制台窗口是有输入缓冲区的,当你按键后程序没有来得及处理,系统会将按键缓存,等到程序获取按键的时候,系统会把缓冲区里面之前的按键返回. // 调用控制台 API,清空之前缓冲区内的所有按键. Flus ...
- 数字电路基础知识——组合逻辑电路(数据选择器MUX、多路复用器)
转自:https://blog.csdn.net/vivid117/article/details/100747939 数字电路基础知识--组合逻辑电路(数据选择器MUX.也即多路复用器)本次介绍数据 ...
- 细说Web API中的Blob
在一般的Web开发中,很少会用到Blob,但Blob可以满足一些场景下的特殊需求.Blob,Binary Large Object的缩写,代表二进制类型的大对象.Blob的概念在一些数据库中有使用到, ...
- 小程序 wx.getSystemInfoSync 获取 windowHeight 问题
windowHeight 概念 可使用窗口高度,即:屏幕高度(screenHeight) - 导航(tabbar)高度 存在问题 安卓设备下获取 windowHeight 不能准确得到对应的高度,总是 ...
- python爬虫---表情包批量采集
代码: import requests from pyquery import PyQuery as pq # 比xpath还要灵活的html解析工具 # 定义请求 headers = { " ...