IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JS中的与、或、空值合并运算符、可选链操作符运算符 -> 正文阅读

[JavaScript知识库]JS中的与、或、空值合并运算符、可选链操作符运算符

javascript有不少好用的运算符,合理的使用可以大大提高工作效率,以下简单介绍了4种,具体如下:

&&

逻辑与运算(&&)是 AND 布尔操作。只有两个操作数都为 true 时,才返回 true,否则返回 false。具体描述如表所示:

条件一条件二结果演示
true1true2true21 && 2 => 2
truefalsefalse1 && 0 => 0
falsetruefalse0 && 1 => 0
false1false2false1null && 0 => null

逻辑与是一种短路逻辑,如果左侧表达式为 false,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:

  1. 计算第一个操作数(左侧表达式)的值。
  2. 检测第一个操作数的值。如果左侧表达式的值可转换为 false(如 nullundefinedNaN0""false),那么就会结束运算,直接返回第一个操作数的值。
  3. 如果第一个操作数可以转换为 true,则计算第二个操作数(右侧表达式)的值。
  4. 返回第二个操作数的值。

实例:

let a = 10
(a > 5) && console.log('哈哈哈'); // 哈哈
等效于:
if(x> 5) {
	console.log('哈哈');
}

||

逻辑或运算(||)是布尔 OR 操作。如果两个操作数都为 true,或者其中一个为 true,就返回 true,否则就返回 false。具体如图所示:

条件一条件二结果演示
truetruetrue1 || 2 => 1
truefalsetrue1 || 0 => 1
falsetruetrue0 || 2 => 2
false1false2false20 || undefined=> undefined

逻辑或也是一种短路逻辑,如果左侧表达式为 true,则直接短路返回结果,不再运算右侧表达式。运算逻辑如下:

  1. 计算第一个操作数(左侧表达式)的值。
  2. 检测第一个操作数的值。如果左侧表达式的值可转换为 true,那么就会结束运算,直接返回第一个操作数的值。
  3. 如果第一个操作数可以转换为 false,则计算第二个操作数(右侧表达式)的值。
  4. 返回第二个操作数的值。

??

空值合并运算符( ?? )是一个逻辑操作符,如果左侧的表达式为 null 或者 undefined 时,返回其右侧表达式,否则返回左侧表达式。
下列表格中的true、false 表示除null undefined 之外任意

条件一条件二结果演示
null11null ?? 1 => 1
undefined22undefined ?? 2 => 2
truefalsetruetrue ?? 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(不存在)xxxxundefinedobj ?. xxxxx =>undefined

优先级:?. > && > || > ??

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-08 07:59:01  更:2022-05-08 08:02:44 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:37:45-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码