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

JavaScript空值合并运算符

The Nullish Coalescing Operator(空值合并运算符)是一种 JavaScript 的新运算符,用于解决默认值设定中存在的一些问题。它的语法为 ??(两个问号),表示当左侧的操作数为 null 或 undefined 时,返回右侧的操作数,否则返回左侧的操作数。

例如

const guestCorrect = restaurant.numGuests ?? 10;
console.log(guestCorrect);

在这里插入图片描述

但是空值并不包含0和空字符

restaurant.numGuests = 0;const guestCorrect = restaurant.numGuests ?? 10;
console.log(guestCorrect);

在这里插入图片描述

总结

const value1 = null ?? "default";
console.log(value1);  // 输出 "default"const value2 = "Hello" ?? "default";
console.log(value2);  // 输出 "Hello"const value3 = undefined ?? "default";
console.log(value3);  // 输出 "default"

可以看到,在上述示例中,第一个操作数为 null 或 undefined 时,空值合并运算符返回了第二个操作数,否则返回了第一个操作数。与传统的默认值设置方式相比,空值合并运算符能够区分 null 和 undefined,避免了一些可能的 bug。
需要注意的是,空值合并运算符仅对 null 和 undefined 进行默认值设置,而不包括其他 Falsy 值(如空字符串、0 和 false)。如果需要在默认值设定中考虑所有 Falsy 值,可以使用逻辑或运算符 ||。
例如:

javascriptCopy Codeconst value4 = "" || "default";
console.log(value4);  // 输出 "default"const value5 = 0 || "default";
console.log(value5);  // 输出 "default"const value6 = false || "default";
console.log(value6);  // 输出 "default"

需要注意的是,空值合并运算符是 ES11(也称为 ECMAScript 2020)的新增特性,如果需要在旧版本的 JavaScript 中使用,可以通过转换成常规的三元条件运算符来实现。

相关文章:

JavaScript空值合并运算符

The Nullish Coalescing Operator(空值合并运算符)是一种 JavaScript 的新运算符,用于解决默认值设定中存在的一些问题。它的语法为 ??(两个问号),表示当左侧的操作数为 null 或 undefined 时&#xff0c…...

Spring Boot 集成 spring security 01

一、导入依赖&#xff08;pom.xml&#xff09; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation&qu…...

C 编程中使用字符串

理解字符串&#xff1a; C 中的字符串是使用字符数组来操作的。数组中的每个字符对应字符串的一个元素&#xff0c;字符串的结尾由空字符&#xff08;\0&#xff09;标记。这个空字符至关重要&#xff0c;因为它表示字符串的结尾&#xff0c;并允许函数确定字符串在内存中的结…...

【GD32307E-START】04 使用TinyMaix进行手写数字识别

【GD32307E-START】04 使用TinyMaix进行手写数字识别 参考博客 【GD32F427开发板试用】使用TinyMaix进行手写数字识别 https://blog.csdn.net/weixin_47569031/article/details/129009839 软硬件平台 GD32F307E-START Board开发板GCC Makefile TinyMaix简介 TinyMaix是国…...

qt-C++笔记之识别点击鼠标右键、点击位置以及Qt坐标系详解

qt-C笔记之识别点击鼠标右键、点击位置以及Qt坐标系详解 code review! 文章目录 qt-C笔记之识别点击鼠标右键、点击位置以及Qt坐标系详解1.示例运行2.event->pos();详解3.event->pos()的坐标系原点4.Qt中的坐标系详解5.QMainWindow::mousePressEvent(event);详解 1.示例…...

小程序开发平台源码系统:搭建新的商业体系 附带完整的搭建教程

小程序开发平台源码系统是在移动互联网快速发展的背景下诞生的。随着微信小程序的普及&#xff0c;越来越多的人开始关注小程序的开发与运营。然而&#xff0c;对于很多初学者和小型企业来说&#xff0c;开发一个小程序需要专业的技术知识和大量的时间投入&#xff0c;这无疑是…...

css3新增的伪类有哪些?

CSS3新增的伪类有&#xff1a; :first-of-type&#xff0c;选择属于其父元素的特定类型的第一个子元素。:last-of-type&#xff0c;选择属于其父元素的特定类型的最后一个子元素。:only-of-type&#xff0c;选择属于其父元素的特定类型的唯一子元素。:only-child&#xff0c;选…...

开源软件license介绍与检测

开源License介绍 通俗来讲&#xff0c;开源许可证就是一种允许软件使用者在一定条件内按照需要自由使用和修改软件及其源代码的的法律条款。借此条款&#xff0c;软件作者可以将这些权利许可给使用者&#xff0c;并告知使用限制。这些许可条款可以由个人、商业公司或非赢利组织…...

【LeeCode】142.环形链表II

给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统内部使用整数…...

nodejs微信小程序+python+PHP健身房信息管理系统的设计与实现-计算机毕业设计推荐

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…...

springboot集成springsecurity

转载自&#xff1a;www.javaman.cn 1、整合springsecurity 添加pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-security</artifactId> </dependency>2、springsecurity认证授权流程…...

脏读、不可重复读、幻读

一、脏读 A事务读取B事务尚未提交的数据&#xff0c;此时如果B事务发生错误并执行回滚操作&#xff0c;那么A事务读取到的数据就是脏数据。就好像原本的数据比较干净、纯粹&#xff0c;此时由于B事务更改了它&#xff0c;这个数据变得不再纯粹。这个时候A事务立即读取了这个脏…...

思维模型 反馈效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。反馈促进改进。 1 反馈效应的应用 1.1 反馈效应在营销中的应用 1 “可口可乐与百事可乐之战” 在 20 世纪 80 年代&#xff0c;可口可乐公司是全球最大的饮料公司之一&#xff0c;其市场…...

【PyTorch】线性回归

文章目录 1. 模型与代码实现2. Q&A 1. 模型与代码实现 模型 y ^ w 1 x 1 . . . w d x d b w ⊤ x b . \hat{y} w_1 x_1 ... w_d x_d b \mathbf{w}^\top \mathbf{x} b. y^​w1​x1​...wd​xd​bw⊤xb. 代码实现 import torch from torch import nn from to…...

硝烟弥漫的科技战场——GPT之战

没想到2023年的双11之后&#xff0c;还能看到如此多的科技圈大佬针对GPT提出火药味十足的讨论和极具戏剧性的表演。 历史回顾&#xff1a; 11月6日&#xff0c;OpenAI发布会&#xff1a;GPT-4 Turbo模型、GPT应用商店、开源Whisper-large-v3等&#xff1b;11月17日&#xff0…...

re:Invent 构建未来:云计算生成式 AI 诞生科技新局面

文章目录 前言什么是云计算云计算类型亚马逊云科技云计算最多的功能最大的客户和合作伙伴社区最安全最快的创新速度最成熟的运营专业能力 什么是生成式 AI如何使用生成式 AI后记 前言 在科技发展的滚滚浪潮中&#xff0c;我们见证了云计算的崛起和生成式 AI 的突破&#xff0c…...

oneApi实现并⾏排序算法

零、OneApi简介 oneAPI是由英特尔推出的一个开放、统一的编程模型和工具集合&#xff0c;旨在简化跨不同硬件架构的并行计算。oneAPI的目标是提供一个统一的编程模型&#xff0c;使开发人员能够使用相同的代码在不同类型的硬件上进行并行计算&#xff0c;包括CPU、GPU、FPGA和…...

语音芯片的BUSY状态指示功能特征:提升用户体验与系统稳定性的关键

在电子产品的音频系统中&#xff0c;语音芯片扮演着至关重要的角色。为了保证音频的流畅播放和功能的正常运行&#xff0c;语音芯片的各种状态指示功能变得尤为重要。其中&#xff0c;BUSY状态指示功能是语音芯片中的一项关键特征&#xff0c;它对于提升用户体验和系统稳定性具…...

Leetcode2661. 找出叠涂元素

Every day a Leetcode 题目来源&#xff1a;2661. 找出叠涂元素 解法1&#xff1a;哈希 题目很绕&#xff0c;理解题意后就很简单。 由于矩阵 mat 中每一个元素都不同&#xff0c;并且都在数组 arr 中&#xff0c;所以首先我们用一个哈希表 hash 来存储 mat 中每一个元素的…...

免费最新6款热门SEO优化排名工具

网站的存在感对于业务和品牌的成功至关重要。在众多网站推广方法中&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;是提高网站可见性的关键。而SEO的核心之一就是关键词排名。为了更好地帮助您优化网站。 SEO关键词排名工具 在如今信息过载的互联网时代&#xff0c;用户…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...

react更新页面数据,操作页面,双向数据绑定

// 路由不是组件的直接跳转use client&#xff0c;useEffect&#xff0c;useRouter&#xff0c;需3个结合&#xff0c; use client表示客户端 use client; import { Button,Card, Space,Tag,Table,message,Input } from antd; import { useEffect,useState } from react; impor…...