JavaScript 可选链接

JavaScript 可选链接是 ECMAScript 2020 中引入的新特性，它为开发者提供了一种简单的方式来判断一个对象是否为 null 或 undefined。在使用可选链接时，如果对象为 null 或 undefined，则表达式会直接返回 undefined，而不会出现异常。

如何使用

在 JavaScript 中使用可选链接的方法非常简单，只需要在对象属性或方法调用的末尾添加问号（?）即可。

let user = {
  name: "Alice",
  address: {
    city: "New York",
  },
}

let city = user?.address?.city
console.log(city)   // 输出 "New York"

let country = user?.address?.country
console.log(country)   // 输出 undefined，而不会出现异常

在上面的例子中，使用可选链接避免了在尝试访问一个不存在的属性 country 时出现异常。

可选链接的使用不限于对象属性，还可以应用于方法调用和数组访问等操作：

let numbers = [1, 2, 3]

let isFive = numbers[4]?.() === 5
console.log(isFive)   // 输出 false，而不会抛出异常

let firstNumber = numbers[0]?.toFixed(2)
console.log(firstNumber)   // 输出 "1.00"

let lastNumber = numbers[numbers.length - 1]?.toFixed(2)
console.log(lastNumber)   // 输出 "3.00"

可选链接与 null 判断的区别

在 JavaScript 中，对于 null 或 undefined 的判断通常使用条件语句或逻辑运算符。可选链接的引入提供了一种更加简洁的处理方式，但它并不能完全替代 null 判断。

对于需要进行类型检查或布尔型判断的情况，可选链接并不能提供完全的解决方案。例如：

let name = ""

let isEmpty = name?.length === 0
console.log(isEmpty)   // 输出 false

let isNull = name === null || name === undefined || name === ""
console.log(isNull)   // 输出 true

在上面的例子中，使用 ?. 判断字符串是否为空时，结果为 false，因为空字符串的长度为 0。如果想要完整地判断字符串的空值情况，还需要使用传统的 null 判断方式。

总结

JavaScript 可选链接为开发者提供了一种简单的方式来判断对象的空值情况，从而避免了在访问不存在的属性或方法时出现异常。但它并不能取代传统的 null 判断方式，只适用于一些简单的空值判断场景。因此，在代码中应该根据具体情况来选择合适的方式来进行空值判断。