如何在 ES12 中使用 Optional Chaining 运算符-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，处理数据的过程中经常会遇到链式调用的情况，例如获取某个对象的属性值，但是该对象的属性可能存在也可能不存在，这时候我们就需要使用 Optional Chaining 运算符来解决这个问题。本文将详细介绍如何在 ES12 中使用 Optional Chaining 运算符，并提供相应的示例代码。

什么是 Optional Chaining 运算符

Optional Chaining 运算符是一种新的语法，它可以轻松地访问对象的属性或方法，无需担心对象是否存在。如果对象不存在，Optional Chaining 运算符会自动返回 undefined。

在 ES12 中，使用 Optional Chaining 运算符时需要在属性名或方法名后面加上一个问号（?），表示如果属性或方法不存在，返回 undefined。

如何使用 Optional Chaining 运算符

使用 Optional Chaining 运算符的语法如下：

object?.property
object?.method()

其中，object 表示要访问的对象，property 表示要访问的属性，method 表示要调用的方法。

下面是使用 Optional Chaining 运算符进行链式调用的示例代码：

// javascriptcn.com 代码示例
const product = {
  name: 'iPhone',
  price: {
    retail: 699,
  },
};

const retailPrice = product.price?.retail;

console.log(retailPrice); // 699

在上面的代码中，我们使用 Optional Chaining 运算符来获取 product 对象的 price 属性的 retail 属性值，并将其赋值给 retailPrice 变量。由于 Optional Chaining 运算符的存在，即使 product 对象不存在 price 属性，也不会导致异常出现，而是返回 undefined 。

需要注意的地方

当使用 Optional Chaining 运算符时，需要注意以下几点：

Optional Chaining 运算符仅适用于 ES12 或更高版本的 JavaScript；
Optional Chaining 运算符仅适用于访问对象的属性或方法，不能用于访问变量或函数；
Optional Chaining 运算符的优先级低于函数调用和属性访问，因此必要时需要使用括号来明确执行顺序。

总结

以上就是在 ES12 中使用 Optional Chaining 运算符的详细介绍和示例代码。希望读者能够通过本文了解 Optional Chaining 运算符的用法，以便在开发过程中更加便捷地处理链式调用的情况。最后，鼓励读者在实际项目开发中尝试使用 Optional Chaining 运算符，并通过实践来深入理解其用法和优势。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c88027d4982a6eb600e3e