【JS】中 ?.、??、??= 的用法和含义

今天分享几个处理空值简单的方法,避免使用三目运算、与或、if else时增加冗余的代,希望对大家有帮助。

 可选链(?.)

let a;
let b = a.?age;

含义:

可选链,只有当a存在,同时 a 具有 age 属性的时候,才会把值赋给b,否则就会将 undefined 赋值给 b,重要的是,不管a存在与否,a.?age 都不会报错。

示例:

不使用( ?. )时:

如果一个值为null、或者是undefined.那么我们再去用点操作符去调用一个方法或者访问一个属性会发生什么?

let a;
let b = a.age;

 运行代码,就会得到一个报错;

 使用( ?. )时:

let a;
let b = a?.age;

运行代码,打印出一个 undefined ;

空值合并运算符(??)

let a;
let b=a??c;

含义:

空值合并运算符(??) ,如果 a 不为 undefined、或者null ,那么 将会把a 赋值给 b ,如果a 为 undefined、或者null,那么就会把 c 赋值给 b。

示例:

不使用( ?? )

var u_defaultValueIfUndfined = function (value, defaultValue) {
  if (typeof value == "undefined" || value == null) {
    return defaultValue;
  }
  return value;
};
let a;
let c=1;  // []、0、“字符串” 等均可
let b =  u_defaultValueIfUndfined(a,c);

使用( ??)

let a;
let c=1;  // []、0、“字符串” 等均可
let b=a ?? c;

 上方两个代码示例效果一样;

空值赋值运算符(??=)

b ??= a;

和上面的( ?? )例子类似

含义: 

 当 ??= 左侧的值为 null 、undefined 的时候,才会将右侧变量的值赋值给左侧变量,其他所有值都不会进行赋值.同样在一些场景下,可以省略很多代码。

示例:

let b = '你好';
let a = 0
let c = null;
let d = ’123‘
b ??= a;  // b = “你好”
c ??= d  // c = '123'

 运行代码,结果如下:

 

好了,今天的分享就到这里啦,欢迎交流!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/30707.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TCP的三次握手与四次挥手

TCP的三次握手与四次挥手 1.网络分层 网络分层代表硬件协议/技术特性应用层HTTP,DNS,FTP,SMTP,Telnet协议等应用程序实现的,规定应用程序的数据格式传输层TCP/UDP协议负责两主机之间的数据正确传输主机系统内核实现的网络层路由器IP协议负责地址管理和路由选择(确定对应主机)…

前端Vue自定义简单实用中国省市区三级联动选择器

前端Vue自定义简单实用中国省市区三级联动选择器&#xff0c; 请访问uni-app插件市场地址&#xff1a;https://ext.dcloud.net.cn/plugin?id13118 效果图如下&#xff1a; #### 使用方法 使用方法 <!-- themeColor:主题颜色 ref:设置唯一ref pickerValueDefault:默认选择…

周大福荣获2023亚洲零售大奖——年度珠宝零售商

由成立于1991年、服务于亚洲充满活力的零售业的行业杂志—《亚洲零售杂志》主办的“2023亚洲零售大奖”评选结果于6月15日揭晓&#xff0c;周大福珠宝集团凭借创新和卓越的表现荣获“2023亚洲零售大奖—年度珠宝零售商&#xff08;中国&#xff09;”&#xff0c;是中国唯一入榜…

【kafka】kafka基础架构

文章目录 1、kafka简介2、kafka的特性3、kafka的应用场景4、kafka架构&#xff08;重点&#xff09;4.1、broker4.2、topic4.3、partition4.4、offset4.5、producer4.6、consumer4.7、consumer group4.8、leader4.9、follower4.10、rebalance 5、对kafka架构的几点解释6、几种M…

【计算机视觉 | 目标检测】arxiv 计算机视觉关于目标检测的学术速递(6月 21 日论文合集)

文章目录 一、检测相关(14篇)1.1 CrossKD: Cross-Head Knowledge Distillation for Dense Object Detection1.2 Depth and DOF Cues Make A Better Defocus Blur Detector1.3 Spatiotemporal Pyramidal CNN with Depth-Wise Separable Convolution for Eye Blinking Detection …

Windows 离线安装mysql5.7

一、下载MySQL5.7最新版 1、官网地址 https://downloads.mysql.com/archives/community/ 2、下载MySQL5.7最新版 下载下图所示的安装包&#xff1a; 二、安装MySQL5.7 1、解压 将刚才下载压缩包解压搭配目录C:\software\mysql-5.7.41&#xff0c;&#xff08;路径大家可…

物联网通信技术

通信的技术指标是什么&#xff1f;AB A. 可靠性 B. 有效性 C. 实时性D. 广覆盖 多路复用技术有哪些&#xff1f;ABCD A. FDMA B. CDMA C. SDMA D. TDMA 使用多个频率来传输信号的技术被称为扩展频谱技术&#xff0c;该技术使用的目的是什么&#xff1f; AB A. 抗干扰B. 提…

python机器人编程——差速AGV机器、基于视觉和预测控制的循迹、自动行驶(下篇)

目录 一、前言二、基于轨迹与路面重心偏离度误差的预测自动差速小车循迹控制策略三、轨迹图像的处理要点四、本篇部分核心控制策略python代码&#xff1a;五、结论 一、前言 基于最近的测试&#xff0c;得到了一种粗略控制的算法&#xff0c;其控制效果适合单线路和急转弯的情…

我们该如何提升测试效率?

在大部分研发项目经理心中&#xff0c;进度往往会放在第一位&#xff0c;其次是成本&#xff0c;最后是质量&#xff0c;当然人员队伍最好也要稳定。天下武功&#xff0c;唯快不破&#xff1a;进度 > 成本 > 质量 > 人。 这个说法并不是绝对&#xff0c;今天我们并不是…

高频前端React面试题汇总

近期整理了一下高频的前端面试题&#xff0c;分享给大家一起来学习。如有问题&#xff0c;欢迎指正&#xff01; 一、组件基础 1. React 事件机制 <div onClick{this.handleClick.bind(this)}>点我</div>React并不是将click事件绑定到了div的真实DOM上&#xff0…

DDOS攻击防御实战(威胁情报)

背景&#xff1a; 不知道大家最近有没有关注到&#xff0c;百度云CDN不支持免费了&#xff0c;网站安全问题越来越严重了…… 常见攻击 DDOS Distributed Denial of Service 分布式拒绝服务攻击可以使很多的计算机在同一时间遭受到攻击&#xff0c;使攻击的目标无法正常使用&…

css基础知识六:谈谈你对BFC的理解?

一、是什么 我们在页面布局的时候&#xff0c;经常出现以下情况&#xff1a; 这个元素高度怎么没了&#xff1f;这两栏布局怎么没法自适应&#xff1f;这两个元素的间距怎么有点奇怪的样子&#xff1f; 归根究底是元素之间相互的影响&#xff0c;导致了意料之外的情况&#…

C++完成淄博烧烤节管理系统

背景&#xff1a; 这次我们结合今年淄博烧烤做一个餐厅管理系统&#xff0c;具体需求如下&#xff0c;我们选择的是餐饮商家信息管理 问题描述&#xff1a; 淄博烧烤今年大火&#xff0c;“进淄赶烤”是大家最想干的事情&#xff0c;淄博烧烤大火特火的原因&#xff0c;火的…

X86架构与Arm架构区别

X86架构和ARM架构是主流的两种CPU架构&#xff0c;X86架构的CPU是PC服务器行业的老大&#xff0c;ARM架构的CPU则是移动端的老大。X86架构和arm架构实际上就是CISC与RISC之间的区别&#xff0c;很多用户不理解它们两个之间到底有哪些区别&#xff0c;实际就是它们的领域不太相同…

【前端 - CSS】第 15 课 - 复合选择器

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、复合选择器 2.1、后代选择器 2.2、子代选择器 2.3、并集选择器 2.4、交集选择器&#xff08;了解&#xff09…

【华为自研】| 国产数据库 GaussDB崛起

目录 GaussDBGaussDB 简介产品优势GaussDB(for openGauss)GaussDB(for MySQL)GaussDB(for Cassandra)GaussDB(for Mongo)GaussDB(for Redis)GaussDB(for Influx) GaussDB GaussDB采用一体化架构&#xff0c;同时支持关系型和非关系型数据库引擎&#xff0c;能够满足政企全方位…

【前端布局篇】响应式布局 Bootstrap 移动端布局

前言 1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局&#xff1a;对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。 网页布局&#xff1a;利用html搭建结构与内容&#xff0c;使用CSS添加装饰 网页布局有很多种方式&a…

Binder对象的流转(系统服务的调用过程、AIDL的使用过程)

零、Binder的传递 Android系统中&#xff0c;存在大量的 IPC 交互&#xff0c;同时也使用了大量的 Binder&#xff0c;那么Binder是怎么在各进程中进行对象的传递&#xff1f; 一、调用系统服务时&#xff0c;Binder的传递 回忆一下&#xff0c;Android系统的启动流程&#x…

数据结构--》从数据结构开始,打好算法基础

目录 数据结构的基本概念 数据结构的三要素 算法的基本概念 数据结构的基本概念 在学习某个知识之前&#xff0c;我们是否都有问过自己我们到底在学习的目的是什么&#xff1f;学习数据结构也一样&#xff0c;我们学习数据结构主要是为了用程序把现实世界的问题信息化&#…

Fiddler之日常使用简介

目录 前言&#xff1a; Fiddler界面简介 一、Fiddler抓取http、https请求配置 二、抓取指定域名会话 三、http请求统计试图 前言&#xff1a; Fiddler是一款功能强大的Web调试工具&#xff0c;它可以帮助开发人员在开发和测试过程中捕获、修改和检查HTTP请求和响应。 使用Fiddl…