在使用 JavaScript 进行开发时，我们经常会遇到 undefined 错误。这种错误通常由于没有正确地检查变量或属性的值而导致的。在过去，为了避免这种错误，我们通常会使用一系列的 if-else 语句来检查值。但是，这种方法很麻烦，而且容易出错。幸运的是，ES12 引入了可选链操作符，这种操作符可以轻松地解决 undefined 错误。
ES12 的可选链操作符
ES12 引入了可选链操作符，这种操作符可以简化检查变量或属性值的过程。可选链操作符的语法如下：
variable?.property
以上代码将检查 variable 是否为 null 或 undefined。如果 variable 不为 null 或 undefined，则返回 property 的值。如果 variable 为 null 或 undefined，则返回 undefined。
可选链操作符可以连接任意数量的属性或方法调用。例如：
variable?.property1?.property2?.method1()
如果 variable 为 null 或 undefined，则返回 undefined。否则，它将检查 property1 是否为 null 或 undefined，然后检查 property2，最后调用 method1，并将返回其返回值。
可选链操作符的使用
可选链操作符可以用于任何变量或属性。以下是一些示例：
检查对象是否为 null 或 undefined
在没有可选链运算符的情况下，我们通常需要这样写代码：
if (myObject && myObject.property) { // do something with myObject.property }
现在，我们可以使用可选链操作符来简化代码：
if (myObject?.property) { // do something with myObject?.property }
如果对象为 null 或 undefined，代码将继续运行，否则它将使用对象的属性进行操作。
检查数组是否为 null 或 undefined
在没有可选链操作符的情况下，我们通常需要这样写代码：
if (myArray && myArray[0]) { // do something with myArray[0] }
现在我们可以使用可选链操作符来简化代码：
if (myArray?.[0]) { // do something with myArray?.[0] }
如果数组为 null 或 undefined，代码将继续运行，否则它将使用数组的第一个元素进行操作。
检查深层次的对象属性是否存在
在没有可选链操作符的情况下，我们通常需要这样写代码：
if (myObject && myObject.property1 && myObject.property1.property2 && myObject.property1.property2.method1) { // do something with myObject.property1.property2.method1 }
现在我们可以使用可选链操作符来简化代码：
if (myObject?.property1?.property2?.method1) { // do something with myObject?.property1?.property2?.method1 }
如果任何属性不存在，代码将继续运行，否则它将使用属性的方法进行操作。
总结
可选链操作符是一种简单、高效的解决方式，可以避免 JavaScript 中的 undefined 错误。它可以用于检查任何变量或属性，包括对象属性、数组元素和函数调用。通过使用可选链操作符，我们可以轻松地编写清晰、简洁和可读性强的代码。它是一种非常有用的新功能，在编程中需要被广泛使用。
示例代码
下面是可选链语法的示例代码：
-- -------------------- ---- ------- ----- ---- - - ----- ----- ----- ------ ------------------- -------- ---- - ----- ----- - ----------- -- ------- ------------------ ----- ----- - ----------- -- ------- --------- ----- ---- - ------------------- -- ------- --------- ------------------ ------------------ -----------------展开代码
const list = [1, 2, 3, 4] const firstItem = list?.[0] // returns 1 const fifthItem = list?.[4] // returns undefined console.log(firstItem) console.log(fifthItem)
-- -------------------- ---- ------- ----- --- - - ------ -------- ------ ------ --- -------- - ------------- -- --------- --- - - ----- ------------ - -------------------------- -- ------- - ----- -------- - ---------------------------- -- ------- --------- ------------------------- ---------------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b1f176add4f0e0ffb21a6e
