探索前端的三个强大符号：??、?. 和 !

网址：www.bugshouji.com

在前端中，有一些特殊的符号和操作符可以帮助我们更优雅、更简洁地处理代码。其中，??（空值合并运算符）、?.（可选链运算符）和 !（非空断言操作符）就是非常实用的几个。

首先，注意三个符号的语法提供者不同

?? 与 ?. 运算符是JavaScript 提供的, javascript 与typescript中都可以使用

! 操作符是用于Typescript的, 只有在typescript环境中可以使用

接下来，我们将逐一介绍它们的用法和意义。

1. ??（空值合并运算符）

空值合并运算符 (??) 是一个逻辑运算符，当左侧的表达式为 null 或 undefined 时，它会返回其右侧的表达式。这个运算符在需要为变量提供一个默认值时特别有用。

例如：

javascript
let name = null;  
let defaultName = "Anonymous";  
let finalName = name ?? defaultName;
 // finalName 将会是 "Anonymous"

在上面的例子中，name 是 null，所以 finalName 被赋值为 defaultName 的值，即 "Anonymous"。如果 name 不为 null 或 undefined，则 finalName 会被赋值为 name 的值。

相当于以前的 ||

如：

let finalName = name || defaultName;

不同的是：

|| 运算符，当左边为false时，也会取右侧的值，

但??运算符，只有当左侧为null 和 undefined时，才会取右侧值

2. ?.（可选链运算符）

可选链运算符 (?.) 允许我们读取位于连接对象链深处的属性的值，而不必显式地验证链中的每个引用是否有效。如果链中的某个引用是 null 或 undefined，表达式会短路并返回 undefined。

例1：

let user = {  
  profile: {  
    name: "John Doe"  
  }  
};  
let userName = user?.profile?.name; 
// userName 将会是 "John Doe"  

例2：

let user = null;  
userName = user?.profile?.name; 
// userName 将会是 undefined，而不是抛出错误

在第二个例子中，当 user 被设置为 null 时，尝试访问 user.profile.name 通常会导致运行时错误。但是，通过使用 ?. 运算符，我们可以安全地访问属性，并在链中的任何环节为 null 或 undefined 时得到 undefined 而不是错误。

相当于&&

a?.b 相当于 a && a.b ? a.b : undefined;

3. !（非空断言操作符）

非空断言操作符 (!) 是一个类型断言，它告诉 TypeScript 编译器某个表达式一定不是 null 或 undefined。这是一个在 TypeScript 中常用的操作符，用于在类型检查期间提供额外的信息给编译器。

例如：

// typescript 代码
let input: string | null = fetchUserInput();  

// 假设我们知道 fetchUserInput()
// 总是返回一个字符串，不是 null  
let processedInput: string = input!.toUpperCase();

我们使用 ! 运算符来断言 input 不是 null，这样我们就可以安全地调用 toUpperCase() 方法而不需要额外的检查。

使用非空断言时，开发者实际上是在告诉编译器：“我知道这个值不可能是 null 或 undefined，所以请相信我，不要在这里报错。”

然而，这种代码的使用通常要谨慎，因为它依赖于开发者的判断来确保属性不是 null 或 undefined。如果可能的话，更好的做法是使用可选链 (?.) 或进行显式的空值检查来避免潜在的运行时错误。

(通俗讲，就是避免了typescript的为null 或undefined 的检查，但如果代码是否真的可以为null 或undefined,则会在运行时报错；所以使用它要谨慎)

总结

??、?. 和 ! 这三个符号为 JavaScript 和 TypeScript 开发者提供了处理空值、链式访问和类型断言的强大工具。它们有助于编写更加简洁、安全且易于理解的代码。然而，使用这些操作符时，开发者需要确保他们的假设是正确的，以避免运行时错误。在使用 ! 运算符时，尤其需要谨慎，因为它只是告诉编译器一个值不是 null 或 undefined，而不会在运行时进行实际检查。