当前位置: 首页 > news >正文

#Js篇: 链式判断运算符 ?.和Null判断运算符 ??和逻辑赋值运算符||= = ??=

链式判断运算符 ?.

?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不再往下运算,而是返回undefined。

链判断运算符?.有三种写法。

obj?.prop // 对象属性是否存在
obj?.[expr] // 同上
func?.(…args) // 函数或对象方法是否存在
下面是obj?.[expr]用法的一个例子。

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

上面例子中,字符串的match()方法,如果没有发现匹配会返回null,如果发现匹配会返回一个数组,?.运算符起到了判断作用。

下面是?.运算符常见形式,以及不使用该运算符时的等价形式。
a?.b
// 等同于
a == null ? undefined : a.ba?.[x]
// 等同于
a == null ? undefined : a[x]a?.b()
// 等同于
a == null ? undefined : a.b()a?.()
// 等同于
a == null ? undefined : a()

Null 判断运算符 ??

读取对象属性的时候,如果某个属性的值是null或undefined,有时候需要为它们指定默认值。常见做法是通过||运算符指定默认值。

第一种弊端 所有的false都会取默认值
const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

上面的三行代码都通过||运算符指定默认值,但是这样写是错的。开发者的原意是,只要属性的值为null或undefined,默认值就会生效,但是属性的值如果为空字符串或false或0,默认值也会生效。

只有为null or undefined才会取默认值
const headerText = response.settings.headerText ?? 'Hello, world!';
const animationDuration = response.settings.animationDuration ?? 300;
const showSplashScreen = response.settings.showSplashScreen ?? true;

上面代码中,默认值只有在左侧属性值为null或undefined时,才会生效。


这个运算符的一个目的,就是跟链判断运算符?.配合使用,为null或undefined的值设置默认值。

const animationDuration = response.settings?.animationDuration ?? 300;

上面代码中,如果response.settings是null或undefined,或者response.settings.animationDuration是null或undefined,就会返回默认值300。也就是说,这一行代码包括了两级属性的判断。

??本质上是逻辑运算,它与其他两个逻辑运算符&&和||有一个优先级问题,它们之间的优先级到底孰高孰低。优先级的不同,往往会导致逻辑运算的结果不同。

现在的规则是,如果多个逻辑运算符一起使用,必须用括号表明优先级,否则会报错。

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);

逻辑赋值运算符 ||=、&&=、??=

// 或赋值运算符
x ||= y
// 等同于
x || (x = y)// 与赋值运算符
x &&= y
// 等同于
x && (x = y)// Null 赋值运算符
x ??= y
// 等同于
x ?? (x = y)
// 老的写法
user.id = user.id || 1;// 新的写法
user.id ||= 1;

相关文章:

#Js篇: 链式判断运算符 ?.和Null判断运算符 ??和逻辑赋值运算符||= = ??=

链式判断运算符 ?. ?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或undefined。如果是的,就不再往下运算,而是返回undefined。 链判断运算符?.有三种写法。 obj?.prop // 对象属性是否存在 obj?.[expr] // 同上…...

IDEA敲Web前端快捷键

1.html基础格式 英文符号TAB键 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport"content"widthdevice-width, user-scalableno, initial-scale1.0, maximum-scale1.0, mini…...

【Vue3】【Naive UI】<NDropdown>标签

【Vue3】【Naive UI】 标签 基本设置自定义渲染交互事件其他属性 【VUE3】【Naive UI】&#xff1c;NCard&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;n-button&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c;a&#xff1e; 标签 【VUE3】【Naive UI】&#xff1c…...

技术总结(四十一)

一、MySQL 索引概述 索引的概念&#xff1a;索引就好比一本书的目录&#xff0c;它能帮助 MySQL 快速定位到表中的数据行&#xff0c;而不用全表扫描。通过创建合适的索引&#xff0c;可以大大提高查询的效率。例如&#xff0c;在一个存储了大量员工信息的表中&#xff0c;如果…...

Android布局

一、线性布局 属性&#xff1a;orientation vertical horizontal layout_weight【水平均分&#xff0c;width"0dp"】 layout_height layout_width 小动物连连看 1<?xml version"1.0" encoding"utf-8"?>2<LinearLayout xmlns:and…...

k8s集成skywalking

如果能科学上网的话&#xff0c;安装应该不难&#xff0c;如果有问题可以给我留言 本篇文章我将给大家介绍“分布式链路追踪”的内容&#xff0c;对于目前大部分采用微服务架构的公司来说&#xff0c;分布式链路追踪都是必备的&#xff0c;无论它是传统微服务体系亦或是新一代…...

如何写一份优质技术文档

作者简介&#xff1a; 本文作者拥有区块链创新专利30&#xff0c;是元宇宙标准化工作组成员、香港web3标准工作组成员&#xff0c;参与编写《数据资产确权与交易安全评价标准》、《链接元宇宙&#xff1a;应用与实践》、《香港Web3.0标准化白皮书》等标准&#xff0c;下面提供…...

LeetCode:206.反转链表

跟着carl学算法&#xff0c;本系列博客仅做个人记录&#xff0c;建议大家都去看carl本人的博客&#xff0c;写的真的很好的&#xff01; 代码随想录 LeetCode&#xff1a;206.反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例…...

详解高斯消元

详解高斯消元 好东西,可以求所有一次方程组的解。 \color {red} 好东西,可以求所有一次方程组的解。 好东西,可以求所有一次方程组的解。 前置知识 一般消元法的公理: 两方程互换,解不变; 一方程乘以非零数 k k k,解不变; 一方程乘以数 k k k加上另一方程,解不变。 …...

Maven - 优雅的管理多模块应用的统一版本号

文章目录 概述一、使用 versions-maven-plugin 插件1. 在主 pom.xml 中定义插件2. 修改版本号3. 回退修改4. 提交修改 二、使用占位符统一管理版本号1. 在主 pom.xml 中定义占位符2. 使用 flatten-maven-plugin 插件自动替换占位符3. 修改版本号4. 为什么这种方式更方便&#x…...

国际网络安全趋势

1. 亲近拥抱人工智能自动化。 随着安全协调、人工智能自动化和响应(SOAR)的日益普及&#xff0c;人工智能自动化开始成为现实并将继续扩展到其他安全行动领域。寻求将人工智能自动化整合到原有的工具中&#xff0c;通过将威胁情报整合在一起&#xff0c;将其转换为可用格式并主…...

基于米尔全志T527开发板的FacenetPytorch人脸识别方案

本篇测评由优秀测评者“小火苗”提供。 本文将介绍基于米尔电子MYD-LT527开发板&#xff08;米尔基于全志 T527开发板&#xff09;的FacenetPytorch人脸识别方案测试。 一、facenet_pytorch算法实现人脸识别 深度神经网络 1.简介 Facenet-PyTorch 是一个基于 PyTorch 框架实…...

Altium Designer脚本工具定制

原理图设计自动化 ➡️Altium原理图检查工具 ➡️元器件参数集导入导出 ➡️原理图符号自动创建 ➡️原理图高级查找 ➡️原理图库文档高级查找 ➡️原理图文档对比 ➡️原理图库文档对比 PCB设计自动化 ➡️各种各样的PCB线圈自动创建 ➡️PCB文档导出成SVG格式文档…...

贝锐自研智慧网关系统OrayOS升级,适配Banana PI开发板BPI-R3 Mini

为了满足多元化的应用场景&#xff0c;贝锐与Banana PI携手合作&#xff0c;贝锐自研新一代云智慧网关系统OrayOS不仅已成功适配BPI-R3&#xff0c;还进一步扩展至BPI-R3 Mini&#xff0c;提供了更丰富的选择。在全球工业物联网、视频监控管理以及企业级办公存储等领域&#xf…...

搭建环境-PHP简介及环境搭建教程

搭建环境-PHP简介及环境搭建教程 前言 在现代Web开发中,PHP是一种广泛使用的服务器端脚本语言,它以简洁、高效和跨平台的特性受到开发者的青睐。无论是小型网站还是大型企业应用,PHP都能提供强大的支持。本文将为您详细介绍PHP的基本概念、特点,以及如何搭建PHP开发环境。…...

Maven 配置

参考学习&#xff1a; eclipse&#xff08;或myeclipse&#xff09;通过maven配置连接neo4j_eclipse 链接 neo4j-CSDN博客 爆肝十小时—我终于用Java连上Neo4j数据库 - 知乎 全站最全Maven下载安装配置教学&#xff08;2024更新...全版本&#xff09;建议收藏...赠送IDEA配置Ma…...

js常见函数实现

文章目录 一、数组Array1、forEach2、filter3、map4、reduce5、find6、findIndex7、includes8、join 二、对象Object1、Object.keys2、深复制 js环境中有很多工具函数&#xff0c;比如es6添加了很多新的属性和方法&#xff0c;这些方法也可以自定义实现&#xff0c;但是官方也提…...

点云3DHarris角点检测算法推导

先回顾2D的Harris角点检测算法推导 自相关矩阵是Harris角点检测算法的核心之一&#xff0c;它通过计算图像局部区域的梯度信息来描述该区域的特征。在推导Harris角点检测算法中的自相关矩阵时&#xff0c;我们首先需要了解自相关矩阵的基本思想和数学背景。 参考 1. 能量函数…...

mysql-binlog的三种模式

MySQL的binlog&#xff08;二进制日志&#xff09;有三种主要模式&#xff0c;分别是Statement、Row和Mixed。这三种模式在记录数据库更改的方式上有显著的区别&#xff0c;以下是对这三种模式的详细解释及对比&#xff1a; 一、Statement模式&#xff08;基于SQL语句的复制&a…...

自动类型推导(auto 和 decltype);右值引用和移动语义

1) 自动类型推导&#xff08;auto 和 decltype&#xff09; 自动类型推导&#xff08;auto&#xff09; 在C11及以后的版本中&#xff0c;auto关键字被引入用于自动类型推导。这意味着编译器会自动推断变量的类型&#xff0c;基于其初始化的表达式。使用auto可以让代码更加简…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...