js ?.的含义|极客笔记

js ?.的含义

1. 介绍

在 JavaScript 中，?. 是一个可选链操作符，它用于简化访问可能为 null 或 undefined 的属性或方法的链式调用。这个操作符可以避免因为一个属性或方法不存在而导致的错误。

?. 是 ECMAScript 的新特性，从 ECMAScript 2020 开始引入。

在这篇文章中，我们将详解 ?. 的使用方法和一些示例，帮助你全面理解这个操作符。

2. 可选链操作符的语法

?. 可以用于对象属性和函数调用两种场景。下面是它们的语法：

对象属性： obj?.prop
函数调用： func?.() 或者 obj?.func()

3. 对象属性

在访问一个对象的属性时，通常我们需要确保对象本身存在，以及属性的链式路径上的每一个对象都存在。否则，我们可能会遇到 TypeError，因为试图访问一个不存在的属性。

而在使用可选链操作符 ?. 之后，当链式路径上的任何一个对象不存在时，表达式都会短路返回 undefined，避免出现错误。

下面是一个使用可选链操作符的简单示例：

let user = {
  name: "Alice",
  address: {
    street: "123 ABC Street",
    city: "New York",
    country: "USA"
  }
};

// 通常的链式调用
console.log(user.address.city); // 输出 "New York"

// 使用可选链操作符
console.log(user.address?.city); // 输出 "New York"

// 如果 address 对象不存在
let emptyUser = {};

console.log(emptyUser.address?.city); // 输出 undefined

在上面的示例中，user 对象中的 address 存在，因此可以使用普通的链式调用访问 city 属性。但是对于 emptyUser 对象，由于 address 属性不存在，使用可选链操作符访问 city 属性会直接返回 undefined。

4. 函数调用

除了访问对象属性，可选链操作符 ?. 也可以用于调用可能不存在的函数。

当我们尝试调用一个不存在的函数时，通常会遇到 TypeError。但是通过可选链操作符，我们可以在方法调用的过程中任意的一个对象不存在时，表达式直接短路返回 undefined。

下面是一个使用可选链操作符的函数调用示例：

let user = {
  name: "Alice",
  greet: function() {
    return "Hello, " + this.name + "!";
  }
};

// 通常的函数调用
console.log(user.greet()); // 输出 "Hello, Alice!"

// 使用可选链操作符
console.log(user.greet?.()); // 输出 "Hello, Alice!"

// 如果 greet 函数不存在
let emptyUser = {};

console.log(emptyUser.greet?.()); // 输出 undefined

在上面的示例中，user 对象中的 greet 函数存在，因此可以正常调用并输出。而对于 emptyUser 对象，由于 greet 函数不存在，使用可选链操作符调用函数会直接返回 undefined。

5. 错误处理

使用可选链操作符 ?. 不仅可以简化代码，还可以方便的处理错误。

在链式访问或函数调用的过程中，如果一个对象不存在，此时使用可选链操作符 ?. 会直接返回 undefined，而不是抛出 TypeError。

这样我们就可以使用空洞运算符（??）或其他的错误处理机制来处理返回值为 undefined 的情况，以避免程序崩溃。

下面是一个演示错误处理的示例：

let user = {
  name: "Alice",
  address: {
    street: "123 ABC Street",
    city: "New York",
    country: "USA"
  },
  greet: function() {
    return "Hello, " + this.name + "!";
  }
};

// 使用可选链操作符和空洞运算符处理错误
console.log(user.address?.postcode ?? "Unknown"); // 输出 "Unknown"
console.log(user.greet?.() ?? "Unable to greet"); // 输出 "Hello, Alice!"

// 如果 address 对象不存在
let emptyUser = {};

console.log(emptyUser.address?.postcode ?? "Unknown"); // 输出 "Unknown"
console.log(emptyUser.greet?.() ?? "Unable to greet"); // 输出 "Unable to greet"

在上面的示例中，我们使用空洞运算符来处理返回值为 undefined 的情况。如果 user.address.postcode 存在，则会输出 postcode 的值；否则，输出 “Unknown”。

同样的，使用空洞运算符可以方便地处理函数调用返回值为 undefined 的情况。