在前端开发中，undefined 引用错误是一个常见的问题。当我们引用一个不存在的属性或变量时，JavaScript 会返回 undefined。如果我们继续对 undefined 进行操作，就会出现 TypeError 的错误。这个问题可以通过 ECMAScript 2020 中的 Optional Chaining 来解决。
Optional Chaining 是一个新的语法特性，它允许我们在对象的属性或方法上进行可选的链式调用，如果链中的任何一个属性或方法不存在，就不会抛出 TypeError 的错误，而是返回 undefined。这个特性可以帮助我们避免 undefined 引用错误，从而提高代码的健壮性和可读性。
Optional Chaining 的语法
Optional Chaining 的语法比较简单，只需要在属性或方法名后面加上问号（?）即可。下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- ---------
-
--
-- -- -------- -------- ------
------------------------ -- -- -------
--------------------------------- -- -- ---------
----------------------------------------- -- -- -------------- --------- ---在上面的代码中，我们使用了 Optional Chaining 来访问 user 对象的属性。如果属性存在，就返回属性的值；如果属性不存在，就返回 undefined，不会抛出 TypeError 的错误。注意，我们可以在链式调用中使用多个问号，这样就可以避免多次判断属性是否存在的问题。
使用 Optional Chaining 解决 undefined 引用错误的方法
在实际开发中，我们经常会遇到 undefined 引用错误的问题。下面是一个示例代码：
const user = {
name: 'Alice',
address: {
city: 'Beijing'
}
};
console.log(user.address.street.name); // 抛出 TypeError 的错误，因为 address 属性不存在在这个示例代码中，我们尝试访问 user 对象的 address 属性的 street 属性的 name 属性。但是，由于 address 属性不存在，JavaScript 就会抛出 TypeError 的错误。这个问题可以通过 Optional Chaining 来解决，示例代码如下：
const user = {
name: 'Alice',
address: {
city: 'Beijing'
}
};
console.log(user?.address?.street?.name); // 返回 undefined，不会抛出 TypeError 的错误在这个示例代码中，我们使用了 Optional Chaining 来访问 user 对象的属性。即使 address 属性不存在，也不会抛出 TypeError 的错误，而是返回 undefined。这个特性可以帮助我们避免 undefined 引用错误，从而提高代码的健壮性和可读性。
总结
Optional Chaining 是 ECMAScript 2020 中的一个新特性，它可以帮助我们避免 undefined 引用错误，从而提高代码的健壮性和可读性。在使用 Optional Chaining 时，我们只需要在属性或方法名后面加上问号（?）即可。如果属性或方法不存在，就会返回 undefined，不会抛出 TypeError 的错误。在实际开发中，我们可以使用 Optional Chaining 来解决 undefined 引用错误的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d72cf31886fbafa44d5266