JS新特性：探索未知，发现惊喜

2023-10-23 18:36:01

可选链操作符(?)：优雅处理空引用

JavaScript中经常需要使用链式操作符(.)来访问对象的属性或调用方法。然而，当某个属性或方法不存在时，这种操作可能会导致错误。为了解决这个问题，ES2020引入了可选链操作符(?)，它允许开发者在引用为空时不会引起错误。

可选链操作符(?)的语法非常简单，它与链式操作符(.)非常相似。不同之处在于，可选链操作符(?)在属性或方法不存在时，它会返回undefined，而不会引起错误。

例如，我们有一个对象person，它具有name和age属性。我们可以使用链式操作符(.)来访问这些属性，如下所示：

console.log(person.name); // "John"
console.log(person.age); // 30

但是，如果我们尝试访问一个不存在的属性，例如address，就会引发错误：

console.log(person.address); // Uncaught TypeError: Cannot read property 'address' of undefined

为了避免这种错误，我们可以使用可选链操作符(?)来访问address属性，如下所示：

console.log(person?.address); // undefined

如您所见，可选链操作符(?)不会引起错误，它只是返回undefined。这使得我们可以更轻松地处理空引用，并避免不必要的错误。

可选链操作符(?)的实用示例

可选链操作符(?)在JavaScript中有许多实际应用场景。这里有一些示例：

避免空引用错误： 可选链操作符(?)可以帮助我们避免空引用错误。例如，我们在处理来自服务器的JSON数据时，可能会遇到一些属性为空的情况。使用可选链操作符(?)，我们可以安全地访问这些属性，而不会引起错误。
处理嵌套对象： 可选链操作符(?)可以帮助我们更轻松地处理嵌套对象。例如，我们有一个对象person，它具有name、age和address属性。address属性本身又是一个对象，它具有street、city和state属性。我们可以使用可选链操作符(?)来安全地访问这些属性，如下所示：

console.log(person?.address?.street); // "123 Main Street"
console.log(person?.address?.city); // "New York"
console.log(person?.address?.state); // "California"