在 ECMAScript 2021（ES12）中，可选链操作符（Optional Chaining Operator）是一个非常实用的新特性，它可以简化代码，避免一些常见的错误。但是，使用可选链操作符也有一些需要注意的地方，本文将介绍在使用可选链操作符时常见的错误，并提供解决方案。
1. 错误：未检查可选链的返回值
可选链操作符可以避免在访问对象属性或方法时出现 TypeError，但是如果没有检查可选链的返回值，仍然可能出现错误。例如：
const data = {
user: {
name: 'John',
age: 30
}
};
const email = data.user?.email.toLowerCase();在上面的代码中，我们尝试访问 data.user.email 属性并将其转换为小写字母。但是，由于 data.user 对象中没有 email 属性，所以会返回 undefined，调用 toLowerCase() 方法时会出现 TypeError。
解决方案：
我们可以使用逻辑或操作符（||）或 nullish 合并操作符（??）来检查可选链的返回值。例如：
const email = data.user?.email?.toLowerCase() ?? 'unknown';
在上面的代码中，如果 data.user.email 属性不存在，则返回 'unknown'，否则将其转换为小写字母。
2. 错误：在数组上使用可选链操作符
可选链操作符不能用于数组，因为数组是一个对象，而不是一个对象属性。例如：
const arr = [1, 2, 3]; const value = arr?.[0];
在上面的代码中，我们尝试使用可选链操作符访问数组的第一个元素。但是，由于数组不是一个对象属性，所以会出现语法错误。
解决方案：
我们可以使用传统的 if 语句来检查数组是否存在，并访问数组元素。例如：
const arr = [1, 2, 3]; const value = arr && arr[0];
在上面的代码中，我们首先检查数组是否存在，如果存在则访问第一个元素。
3. 错误：在函数调用中使用可选链操作符
可选链操作符不能用于函数调用，因为函数不是一个对象属性。例如：
const obj = {
foo: function() {
console.log('foo');
}
};
obj?.foo();在上面的代码中，我们尝试使用可选链操作符调用 obj.foo() 方法。但是，由于函数不是一个对象属性，所以会出现语法错误。
解决方案：
我们可以使用传统的 if 语句来检查函数是否存在，并调用函数。例如：
-- -------------------- ---- -------
----- --- - -
---- ---------- -
-------------------
-
--
-- ---- -- -------- -
----------
-在上面的代码中，我们首先检查函数是否存在，如果存在则调用函数。
4. 错误：在链式调用中使用可选链操作符
可选链操作符可以在链式调用中使用，但是需要注意一些细节。例如：
-- -------------------- ---- -------
----- --- - -
---- ---------- -
-------------------
------ -
---- ---------- -
-------------------
-
--
-
--
------------------在上面的代码中，我们尝试在链式调用中使用可选链操作符。但是，由于可选链操作符的优先级比函数调用高，所以会出现语法错误。
解决方案：
我们可以使用括号来明确优先级。例如：
-- -------------------- ---- -------
----- --- - -
---- ---------- -
-------------------
------ -
---- ---------- -
-------------------
-
--
-
--
------------------------在上面的代码中，我们使用括号明确优先级，可以正确地在链式调用中使用可选链操作符。
结论
在 ECMAScript 2021（ES12）中，可选链操作符是一个非常实用的新特性，可以简化代码，避免一些常见的错误。但是，在使用可选链操作符时需要注意一些细节，例如检查可选链的返回值、不能在数组和函数调用中使用可选链操作符等。通过本文的介绍，你可以更好地理解可选链操作符，并避免一些常见的错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67417c26ed0ec550d71fd4b9