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

js:可选链运算符(?.)和空值合并运算符(??)

文档:

  • 可选链运算符(?.)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
  • 空值合并运算符(??)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

目录

    • 1、可选链运算符(?.)
    • 2、空值合并运算符(??)

1、可选链运算符(?.)

可选链运算符(?.)允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。

假设有两个对象,数据而结构如下

let person1 = {cat: {name: 'Tom',},
}let person2 = {}

获取嵌套对象的name属性

// 正常情况下
console.log(person1.cat.name) // Tom// 直接取嵌套对象的数据会抛出异常
console.log(person2.cat.name) 
// TypeError: Cannot read properties of undefined (reading 'name')

使用可选链运算符(?.)就可以很好的规避这个问题

console.log(person2.cat?.name) // undefined// 等价于
console.log(person2.cat && person2.cat.name) // undefined

2、空值合并运算符(??)

空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。

示例

// 空值合并运算符(??)
console.log(null ?? 'default'); // default
console.log(undefined ?? 'default'); // default
console.log(0 ?? 'default'); // 0
console.log(NaN ?? 'default'); // NaN
console.log(false ?? 'default'); // false
console.log('' ?? 'default'); // ''// 逻辑或运算符(||)
console.log(null || 'default'); // default
console.log(undefined || 'default'); // default
console.log(0 || 'default'); // default
console.log(NaN || 'default'); // default
console.log(false || 'default'); // default
console.log('' || 'default'); // default
表达式左侧取值??返回值||返回值
nulldefaultdefault
undefineddefaultdefault
00default
NaNNaNdefault
falsefalsedefault
''''default

相关文章:

js:可选链运算符(?.)和空值合并运算符(??)

文档: 可选链运算符(?.)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining空值合并运算符(??)https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Referenc…...

【Java 进阶篇】Java ServletContext功能:获取文件服务器路径

Java ServletContext是Java EE中的一个核心接口,用于与Servlet容器进行通信,提供了许多有用的功能,包括获取文件服务器路径。在本文中,我们将详细介绍如何使用ServletContext来获取文件服务器路径,并提供示例代码以帮助…...

Android startActivity流程

1.常规调用 startActivity(new Intent(this,MainActivity.class)); 进入Activity的startActivity方法 /*** Same as {link #startActivity(Intent, Bundle)} with no options* specified.** param intent The intent to start.** throws android.content.ActivityNotFoundExc…...

Qt实验室

前言 本系列文章是研究和记录Qt开发过程中遇到的各种问题的集合 由于Qt是一个庞大的开发体系,很难用有限的文案对其做全面深入细致的讲解,因此市面上大多数Qt开发相关的教程都显得极其粗浅入门,通常只能作为最基本的入门教程。但是实际项目…...

diffusers-Load adapters

https://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adaptershttps://huggingface.co/docs/diffusers/main/en/using-diffusers/loading_adapters 有几种训练技术可以个性化扩散模型,生成特定主题的图像或某些风格的图像。每种训练方法都会产…...

CVI 串口调试助手

基于Labwindows CVI 2017编写的一个简单的串口调试助手&#xff0c;附带接收一个00–99的两位数并进行波形绘制的功能&#xff0c;编写过程可见&#xff1a;https://blog.csdn.net/Stark_/article/details/129003839 #include <ansi_c.h> #include <rs232.h> #incl…...

【蓝桥杯选拔赛真题48】python最小矩阵 青少年组蓝桥杯python 选拔赛STEMA比赛真题解析

目录 python最小矩阵 一、题目要求 1、编程实现 2、输入输出 二、算法分析...

如何在家庭网络中开启 IPv6内网穿透

随着互联网的不断发展&#xff0c;IPv4地址资源逐渐枯竭&#xff0c;而IPv6作为它的继任者&#xff0c;为网络连接提供了更多的IP地址。启用IPv6对于家庭网络来说变得越来越重要&#xff0c;因为它可以提供更稳定、更安全、更快速的互联网连接。本文将指导如何在家庭网络中启用…...

CodeWhisperer 的安装及体验

CodeWhisperer 是亚马逊出品的一款基于机器学习的通用代码生成器&#xff0c;可实时提供代码建议。类似 Cursor 和 Github Copilot 编码工具。 官网&#xff1a;aws.amazon.com/cn/codewhis… 在编写代码时&#xff0c;它会自动根据您现有的代码和注释生成建议。从单行代码建…...

【C/C++】虚析构和纯虚析构

纯虚析构的问题 多态使用时&#xff0c;如果子类中有属性开辟到堆区&#xff0c;那么父类指针在释放时无法调用到子类的析构代码。 解决方式&#xff1a;将父类中的析构函数改为虚析构或者纯虚析构 虚析构和纯虚析构共性&#xff1a; 可以解决父类指针释放子类对象都需要有…...

第四章 应用SysML基本特性集的汽车示例 P1|系统建模语言SysML实用指南学习

仅供个人学习记录 汽车模型 主要就是应用练习建模了 Automobile Domain包 用于组织模型的包图 将模型组织入包的包图 需求图捕获汽车规范 汽车规范中包含系统需求的需求图 块定义图定义车辆及其外部环境 汽车域块定义图 用例图表示操作车辆 描述车辆主要功能的用…...

C语言 写一个简易音乐播放器

#include <stdio.h> #include <stdlib.h> #include <stdbool.h> #include <math.h>#define SAMPLE_RATE 44100 // 采样率 #define AMPLITUDE 32767 // 振幅 #define NO_SAMPLES 44100 // 样本数// 声明一个结构体用于表示音符 typedef struct {double …...

面试题:有一个 List 对象集合,如何优雅地返回给前端?

文章目录 1.业务背景每个对象里面都带上了重复的一个sessionId数据&#xff0c;我想提出来该怎么办&#xff1f; 2.实体类3.自定义Mapper和xml文件4.Service层5.Controller层 1.业务背景 业务场景中&#xff0c;一个会话中存在多个场景&#xff0c;即一个session_id对应多个sc…...

DAY43 完全背包理论基础 + 518.零钱兑换II

完全背包 有N件物品和一个最多能背重量为W的背包。第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品都有无限个&#xff08;也就是可以放入背包多次&#xff09;&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 完全背包和01背包问题唯一不同…...

unity 从UI上拖出3D物体,(2D转3D)

效果展示&#xff1a; 2D转3D视频 UI结构 UI组件挂载 UI结构 这个脚本挂载到 3D物体身上 using DG.Tweening; using System.Collections; using System.Collections.Generic; using UnityEngine;public class DragGame : MonoBehaviour {[HideInInspector]public bool isDrag…...

win10pycharm和anaconda安装和环境配置教程

windows10 64位操作系统下系统运行环境安装配置说明 下载和安装Anaconda&#xff0c;链接https://www.anaconda.com/download 下载完后&#xff0c;双击exe文件 将anaconda自动弹出的窗口全部关掉即可&#xff0c;然后配置高级系统变量 根据自己的路径&#xff0c;配置…...

[C++ 中]:6.类和对象下(static成员 + explicit +友元函数 + 内部类 + 编译器优化)

(static成员 explicit 友元函数 内部类 编译器优化&#xff09; 一.static 成员&#xff1a;1.概念引入&#xff1a;1-1&#xff1a;定义全局变量记录个数&#xff1f; 2.如果有多个类需要分开去记录类对象的个数&#xff1f;2-1&#xff1a;可不可以声明成员变量解决&#…...

ONES Design UI 组件库环境搭建

这个 ONES Design UI 组件库 是基于 Ant Design 的 React UI 组件库&#xff0c;主要用于企业级研发管理工具的研发。 首先用 React 的脚手架搭建一个项目&#xff1a; npx create-react-app my-app cd my-app目前 ONES Design UI 组件库 托管在 ONES 私有的 npm 仓库上, 因此…...

支付宝AI布局: 新产品助力小程序智能化,未来持续投入加速创新

支付宝是全球领先的独立第三方支付平台&#xff0c;致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验&#xff0c;及转账收款/水电煤缴费/信用卡还款/AA收款等生活服务应用。 支付宝不仅是一个支付工具&#xff0c;也是一个数字生活平台&#xff0c;通过…...

taro全局配置页面路由和tabBar页面跳转

有能力可以看官方文档&#xff1a;Taro 文档 页面路由配置&#xff0c;配置在app.config.ts里面的pages里&#xff1a; window用于设置小程序的状态栏、导航条、标题、窗口背景色&#xff0c;其配置项如下&#xff1a; tabBar配置&#xff1a;如果小程序是一个多 tab 应用&…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

TCP/IP 网络编程 | 服务端 客户端的封装

设计模式 文章目录 设计模式一、socket.h 接口&#xff08;interface&#xff09;二、socket.cpp 实现&#xff08;implementation&#xff09;三、server.cpp 使用封装&#xff08;main 函数&#xff09;四、client.cpp 使用封装&#xff08;main 函数&#xff09;五、退出方法…...

STM32标准库-ADC数模转换器

文章目录 一、ADC1.1简介1. 2逐次逼近型ADC1.3ADC框图1.4ADC基本结构1.4.1 信号 “上车点”&#xff1a;输入模块&#xff08;GPIO、温度、V_REFINT&#xff09;1.4.2 信号 “调度站”&#xff1a;多路开关1.4.3 信号 “加工厂”&#xff1a;ADC 转换器&#xff08;规则组 注入…...