在前端开发中，我们经常需要用到 JavaScipt 操作浏览器的 DOM 元素或数据等，但是当 DOM 元素或数据不存在时，JS 代码会出现错误，导致程序终止执行。为了解决这个问题，ECMAScript 2021 中推出了可选链操作符 (?.)，该操作符可以在安全的情况下访问对象的属性或方法，避免了出现 TypeError 错误。本文将详细介绍可选链操作符的使用方法和示例代码。
可选链操作符 (?.) 的基本语法
可选链操作符使用问号（?）和点号（.）分割开来，语法格式如下：
object?.property object?.method() object?.[property]
其中，object 是需要访问的对象；property 是需要访问的属性；method 是需要访问的方法。
该语法表示通过对象访问属性或调用方法时，如果对象或属性或方法不存在，则不会出现错误，直接返回 undefined。
可选链操作符示例代码
- 访问对象属性
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- --- --------- - ------ ----- ----- ----- - -- -- ---- ---- -------- --------- --------------------------------- -- ---- -- ---- ----- ----- ------ --------- -- ------------------------------ -- ---------- ------ ---- -------- ------- -- --------- -- -------- ------ ----- ------------------ --------- ------------------------------- -- ---------展开代码
- 调用对象方法
-- -------------------- ---- ------- ----- ---- - - ----- ----- ---- --- ------- - ------------------- ---------------- ----------- ----- - -- -- ---- ---- ----- --------- ------------- -- ------- ------ -- --- -- ---- ----- --- ------ --------- -- ----------- -- ---------- -------- -- --- - -------- -- -------- ------ --- ------------------ --------- ------------- -- ---------展开代码
- 访问对象属性（使用数组下标）
const foods = ['鸡蛋', '豆腐', '小咸菜']; // foods 数组中有第 1 个元素，不会出现错误 console.log(foods[0]); // "鸡蛋" // foods 数组中没有第 4 个元素，会出现 TypeError 错误 console.log(foods[3]); // TypeError: Cannot read property '3' of undefined // 使用可选链操作符 (?.)，当第 4 个元素不存在时，不会出现错误，直接返回 undefined console.log(foods[3]?.color); // undefined
可选链操作符在 React 中的应用
在 React 组件开发中，我们经常需要访问 props 对象的属性值。如果某个属性不存在，会导致程序终止执行，为了避免这种情况，我们可以使用可选链操作符来访问 props 对象属性：
-- -------------------- ---- ------- -------- ---------------- - ------ - ----- ---------------------------- --------------------------- ------ -- - -- --------- ----- ----- ---- ------- -------------------------- --- ---------------------------------展开代码
总结
可选链操作符是 ECMAScript 2021 中新增的功能，可以在安全的情况下访问对象的属性或方法，避免了出现 TypeError 错误。在 React 组件开发中，可选链操作符可以避免访问 props 对象属性时出现错误。大家在开发中可以灵活运用可选链操作符，提升代码健壮性和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a8e554add4f0e0ff225aa7
