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

一、?. 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