一、?. angular中的安全导航符（可选链）

在我们日常开发中，在访问属性路径的时候，如果因为一些客观原因导致了路径中出现了 null、undefined，再往下取值，整个程序就会直接报错，导致程序不能往下运行:

const obj ={a:1,b:{  // 有时候,有可能这个属性不存在c:2,d:3 }
}
obj.a //正常取值
obj.b //当此属性不存在,这样取值的话,也只是取到一个 undefined,并不会报错
obj.b.c //当b属性不存在的时候,在undefined下取值,就绝对会造成程序崩溃

安全导航就是要解决以上问题,我们只要在不确定的属性前的.改成 ?.就可以不需要报错了,当没有取到值的时候，会默认为空。此时{{ obj?.b?.c }}就可以使用不报错了。

举例

<img [src]="pictureDatas[0]?.pictureUrl" useImg [spinner]="true"></img>

pictureDatas[0]?.pictureUrl----如果pictureDatas[0]有值，就会取pictureDatas[0]中pictureUrl。如果pictureDatas[0]没有值（pictureDatas[0]为null或者为undefined），页面渲染加载的时候也不会报错。

二、!. ts中的非空断言操作符

在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言，x! 将从 x 值域中排除 null 和 undefined 。

在 TypeScript 2.0 中，我们可以使用–strictNullChecks标志强制开启严格空值检查。TypeScript就会确保不存在意料之外的null或undefined。
与安全导航操作符不同的是，非空断言操作符不会防止出现null或undefined。它只是告诉 TypeScript 的类型检查器对特定的属性表达式，不做 “严格空值检测”。

举例

下例中，当currentHero为空时，保护视图渲染器，让它免于失败。

The current hero's name is {{currentHero?.name}}<div *ngIf="hero">The hero's name is {{hero!.name}}
</div>

小总结

?. 用来检查问号前面的变量是否为null或者undefined时，程序不会出错；
!. 用来检查感叹号后面的变量为null或者undefined时，程序不会出错。

三、?: ts中的可选参数

?: 可以把某个属性声明为可选的。可选参数与默认参数一定要放在必选参数之后声明。

interface Person {name: string;age?: number;
}let lolo: Person  = {name: "lolo"
}

四、?? ts中的空值合并运算符

在 TypeScript 3.7 版本中除了引入了前面介绍的可选链 ?.之外，也引入了一个新的逻辑运算符 —— 空值合并运算符??。当左侧操作数为 null 或 undefined 时，其返回右侧的操作数，否则返回左侧的操作数。

const foo = null ?? 'default string';
console.log(foo); // 输出："default string"const baz = 0 ?? 42;
console.log(baz); // 输出：0

并且空值合并运算符符合短路，当空值合并运算符的左表达式不为 null 或 undefined 时，不会对右表达式进行求值。
不能与&&或||操作符共用，若空值合并运算符??直接与AND（&&）和 OR（||）操作符组合使用 ??是不行的。这种情况下会抛出 SyntaxError。但当使用括号来显式表明优先级时是可行的，比如：

(null || undefined ) ?? "foo"; // 返回 "foo"interface Customer {name: string;city?: string;
}let customer: Customer = {name: "Semlinker"
};let customerCity = customer?.city ?? "Unknown city";
console.log(customerCity); // 输出：Unknown city

非空判断

let a = '';
let b;
let c = null;if((a ?? '')==''){console.log('若a为空输出此行');
}
if((b ?? '')==''){console.log('若b为空输出此行');
}
if((c ?? '')==''){console.log('若c为空输出此行');
}

输出

若a为空输出此行
若b为空输出此行
若c为空输出此行

五、!! 强制转化为bool值

!!是将表达式强制转化为bool值的运算，运算结果为true或false，表达式是什么值，结果就是对应的bool值，不再取非。详细见如下地址
https://blog.csdn.net/weixin_42960907/article/details/120863137

https://cloud.tencent.com/developer/article/1695444
https://www.jianshu.com/p/0641bbc3c014
https://blog.csdn.net/zhengdong12345/article/details/116789816

【Angular/TS】一文弄懂安全导航操作符(?.)、非空断言操作符/可选链(?.) 、空值合并运算符相关推荐

【金三银四】一文弄懂 js 数据类型、堆栈内存、作用域（链）、闭包知识拓展（一）
引言对答如流系列篇,关于基本数据类型.堆栈内存.作用域作用域链.闭包大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Gi ...
一文弄懂 Diffusion Model
什么是 Diffusion Model 一.前向 Diffusion 过程 Diffusion Model 首先定义了一个前向扩散过程,总共包含T个时间步,如下图所示: 最左边的蓝色圆圈 x0 表示真 ...
一文弄懂元学习 (Meta Learing)（附代码实战）《繁凡的深度学习笔记》第 15 章元学习详解（上）万字中文综述
<繁凡的深度学习笔记>第 15 章元学习详解 (上)万字中文综述(DL笔记整理系列) 3043331995@qq.com https://fanfansann.blog.csdn.net ...
一文弄懂神经网络中的反向传播法
最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...
一文弄懂各种loss function
有模型就要定义损失函数(又叫目标函数),没有损失函数,模型就失去了优化的方向.大家往往接触的损失函数比较少,比如回归就是MSE,MAE,分类就是log loss,交叉熵.在各个模型中,目标函数往往都是 ...
一文弄懂神经网络中的反向传播法——BackPropagation【转】
本文转载自:https://www.cnblogs.com/charlotte77/p/5629865.html 一文弄懂神经网络中的反向传播法--BackPropagation 最近在看深度学习的东 ...
一文弄懂String的所有小秘密
文章目录简介 String是不可变的传值还是传引用 substring() 导致的内存泄露总结一文弄懂String的所有小秘密简介 String是java中非常常用的一个对象类型.可以说ja ...
一文弄懂EnumMap和EnumSet
文章目录简介 EnumMap 什么时候使用EnumMap EnumSet 总结一文弄懂EnumMap和EnumSet 简介一般来说我们会选择使用HashMap来存储key-value格式的数据, ...
CAD2010 为了保护_一文弄懂，锂电池的充电电路，以及它的保护电路方案设计
原标题:一文弄懂,锂电池的充电电路,以及它的保护电路方案设计锂电池特性首先,芯片哥问一句简单的问题,为什么很多电池都是锂电池? 锂电池,工程师对它都不会感到陌生.在电子产品项目开发的过程中,尤其是 ...
deque stack java_一文弄懂java中的Queue家族
简介 java中Collection集合有三大家族List,Set和Queue.当然Map也算是一种集合类,但Map并不继承Collection接口. List,Set在我们的工作中会经常使用,通常用 ...

【Angular/TS】一文弄懂安全导航操作符(?.)、非空断言操作符/可选链(?.) 、空值合并运算符

一文弄懂安全导航操作符、非空断言操作符