JavaScript (JS) 中的 `?.` 和 `!.` 操作符

JavaScript (JS) 和 TypeScript (TS) 中的 ?. 和 !. 操作符是用来处理对象属性访问和方法调用的，但它们有不同的用途和行为。下面详细解释这两个操作符的区别。

可选链操作符 ?.

简介

?. 是 ES2020 引入的可选链操作符（Optional Chaining Operator）。它用于在访问对象属性或调用方法时，简化处理 null 或 undefined 的情况。

作用

当使用 ?. 访问对象属性或调用方法时，如果前面的对象是 null 或 undefined，表达式会短路并返回 undefined，而不会抛出错误。

语法

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)

示例

let user = {
   
   
    name: "John",
    address: {
   
   
        street: "123 Main St"
    }
};

console.log(user?.address?.street); // 输出: 123 Main St
console.log(user?.contact?.phone);  // 输出: undefined，不会抛出错误

非空断言操作符 !.

简介

!. 是 TypeScript 中的非空断言操作符（Non-null Assertion Operator）。它用于告诉 TypeScript 编译器，某个值在运行时一定不是 null 或 undefined，从而避免类型检查错误。

作用

当使用 !. 操作符时，开发者向编译器保证该值不会是 null 或 undefined，因此在编译时不会报错。

语法

value!

示例

function processString(str: string | null) {
   
   
    // 告诉编译器 str 一定不是 null
    console.log(str!.toUpperCase());
}

let str: string | null =