ES12（也称为 ES2021）是 ECMAScript 的最新版本，其中引入了一些非常有用的新特性。其中一个新特性就是连续点运算符（optional chaining operator），它可以帮助我们更方便地访问嵌套对象和数组的属性和方法。
在本文中，我们将深入探讨连续点运算符的使用和注意事项，并提供一些示例代码和实际应用场景，帮助您更好地理解并使用这个新特性。
连续点运算符的语法
连续点运算符的语法非常简单，就是在点（.）的前面加上一个问号（?）：
const value = obj?.prop;
这个语法可以用于访问对象和数组的属性和方法，如果属性或方法不存在，它会返回 undefined 而不是抛出错误。
连续点运算符的使用示例
考虑以下对象：
-- -------------------- ---- -------
----- ---- - -
----- --------
------ --------------------
-------- -
----- ---- ------
------ -----
---- -------
-
--我们可以使用连续点运算符来访问嵌套属性：
const zipCode = user?.address?.zip; console.log(zipCode); // '10001'
如果我们尝试访问不存在的属性，它会返回 undefined：
const phoneNumber = user?.phone?.number; console.log(phoneNumber); // undefined
连续点运算符还可以用于访问数组的元素。考虑以下数组：
const items = [
{ name: 'item1', price: 10 },
{ name: 'item2', price: 20 },
{ name: 'item3' }
];我们可以使用连续点运算符来访问数组元素的属性：
const price = items[1]?.price; console.log(price); // 20
如果我们尝试访问不存在的元素，它会返回 undefined：
const price2 = items[3]?.price; console.log(price2); // undefined
连续点运算符的注意事项
虽然连续点运算符非常方便，但是在使用时需要注意一些坑点。
1. 连续点运算符和函数调用的优先级
连续点运算符的优先级比函数调用低。考虑以下代码：
const result = obj?.method();
如果 obj 存在并且有 method 方法，它会被调用并返回结果，否则 result 会被赋值为 undefined。但是如果我们想要调用 obj 的 method 方法，并使用它的返回值来给 result 赋值，我们需要使用括号来明确优先级：
const result = obj?.method() ?? defaultValue;
2. 连续点运算符和 delete 操作符的冲突
连续点运算符和 delete 操作符有冲突，因为 delete 操作符不能用于 undefined。考虑以下代码：
delete obj?.prop;
如果 obj 不存在或者没有 prop 属性，它会返回 undefined，而 delete 操作符不能用于 undefined，会抛出错误。因此，我们需要先判断属性是否存在，再使用 delete 操作符：
if (obj?.prop) {
delete obj.prop;
}3. 连续点运算符和模板字符串的冲突
连续点运算符和模板字符串有冲突，因为模板字符串中的 $ 符号可能被解释为连续点运算符。考虑以下代码：
const message = `Hello, ${user?.name}`;如果 user 不存在或者没有 name 属性，它会返回 undefined，而模板字符串中的 ${} 语法会将 user?.name 解释为一个表达式，会抛出错误。因此，我们需要使用括号来明确 ${} 的范围：
const message = `Hello, ${user?.name}`;连续点运算符的实际应用场景
连续点运算符可以帮助我们更方便地访问嵌套对象和数组的属性和方法，特别是在处理 API 数据时非常有用。考虑以下代码：
const data = await fetch(url).then(res => res.json()); const title = data?.content?.title ?? 'Untitled'; const content = data?.content?.body ?? 'No content';
如果 API 返回的数据格式不符合预期，我们可以使用连续点运算符来避免抛出错误，并提供默认值。
另一个实际应用场景是在 React 组件中使用。考虑以下代码：
-- -------------------- ---- -------
-------- ------------------ -
----- - ---- - - ------
------ -
-----
--------------- -- -----------------
------------- -- --- ---------
------
--
-如果 user 不存在或者没有 name 或 bio 属性，它会返回 undefined，而连续点运算符和 ?? 运算符可以帮助我们提供默认值。
总结
连续点运算符是 ES12 中的一个非常有用的新特性，它可以帮助我们更方便地访问嵌套对象和数组的属性和方法，并避免抛出错误。在使用时需要注意优先级、delete 操作符和模板字符串的冲突，并在实际应用中灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbbe1fd10417a2227504ff