JavaScript中 ?、!和?? 的用法及区别详解

1. 可选链操作符 ?.

用法: obj?.prop 或 obj?.[expr]

功能: 当尝试访问一个深层嵌套的属性时，如果对象obj是null或undefined，使用?.操作符可以避免抛出错误，而是直接返回undefined，而不是尝试访问不存在的属性导致的错误。

示例:

const user = null;
console.log(user?.name); // 输出 undefined 而不是抛出错误

2. 非空断言操作符 !.

用法: obj!.prop

功能: 这个操作符告诉TypeScript编译器你确定该表达式绝对不会为null或undefined，从而避免了类型检查时的警告。需要注意的是，这仅影响编译时的类型检查，并不会改变运行时的行为，因此如果实际上该表达式为null或undefined，依然会导致运行时错误。

示例: （此示例假设在TypeScript环境下）

let user: User | null = fetchUserData();
console.log(user!.name); // 告诉TypeScript你确定user不是null或undefined

3. 空值合并操作符 ??

用法: value ?? fallback

功能: 当value为null或undefined时，返回fallback指定的值；否则，返回value本身。这与逻辑或||操作符不同，因为||会在value为任何假值（如0、false、空字符串等）时就返回fallback，而??只在value严格等于null或undefined时才进行替换。

示例:

let num = null;
const result = num ?? 42; // result为42，因为num是null

总结起来，?.帮助安全地访问对象属性，!.用于告诉TypeScript编译器忽略可能的null或undefined检查（使用时要确保安全），而??则是在值为null或undefined时提供一个替代值。

到此这篇关于JavaScript中 ?、!和?? 的用法及区别详解的文章就介绍到这了,更多相关JavaScript ?、!、??用法及区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！