在现代的 JavaScript 和 TypeScript 中，我们经常会遇到一些特殊的运算符，它们提供了便捷的语法来处理常见的编程场景。本文将介绍三个常见的运算符：??、?. 和 !，并通过实例来演示它们的用法和作用。
?? - 空值合并
当我们需要提供默认值，以防一个值为 null 或 undefined 时，空值合并运算符 ?? 就派上用场了。
它用于检查一个值是否为 null 或 undefined，如果是的话，就返回一个备选值。
// 示例 1
const value1 = null
const defaultValue1 = 'Hello, World!'
const result1 = value1 ?? defaultValue1
console.log(result1) // 输出: 'Hello, World!'
// 示例 2
const value2 = 'JavaScript'
const defaultValue2 = 'Hello, World!'
const result2 = value2 ?? defaultValue2
console.log(result2) // 输出: 'JavaScript'
在示例 1 中，value1 是 null，所以运算符 ?? 返回 defaultValue1，
而在示例 2 中，value2 是一个非空字符串，所以 ?? 返回 value2 本身。
查看更多：空值合并运算符 - MDN文档
?. - 可选链
在处理深层次的嵌套对象时，我们常常需要检查每一层是否存在，避免出现繁琐的空值检查。
可选链运算符 ?. 能够简化这一过程，它允许我们在对象链中进行安全的属性和方法访问，即使其中某个值为 null 或 undefined。
// 示例 1
const user1 = {
name: 'Alice',
address: {
city: 'Wonderland'
}
}
const city1 = user1.address?.city
console.log(city1) // 输出: 'Wonderland'
// 示例 2
const user2 = {
name: 'Bob',
address: null
}
const city2 = user2.address?.city
console.log(city2) // 输出: undefined
在示例 1 中，user1 对象中有 address 属性，所以 user1.address?.city 成功访问到了 city 属性。
而在示例 2 中，user2 对象的 address 属性为 null，所以 user2.address?.city 返回 undefined。
查看更多：可选链运算符 - MDN文档
! - 非空断言
当我们清楚知道一个变量不为 null 或 undefined 时，使用非空断言运算符 ! 可以告诉 TypeScript 编译器不再进行空值检查，从而避免不必要的错误提示。
// 示例 1
function greet1(name: string | null) {
// 使用非空断言 ! 来断言 name 不为 null
const message = `Hello, ${name!}`
console.log(message)
}
greet1('Alice') // 输出: 'Hello, Alice'
greet1(null) // 在编译时不会报错，运行时会输出 'Hello, null'
// 示例 2
function greet2(name: string | undefined) {
// 使用非空断言 ! 来断言 name 不为 undefined
const message = `Hello, ${name!}`
console.log(message)
}
greet2('Bob') // 输出: 'Hello, Bob'
greet2(undefined) // 在编译时不会报错，运行时会输出 'Hello, undefined'
需要注意的是，滥用非空断言可能会导致运行时错误，因此在使用时应当确保我们对变量的状态有清晰的认识。