JavaScript 中使用 ES12 的可选链语法解决 undefined 错误-JavaScript中文网-JavaScript教程资源分享门户

在使用 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 user = {
  name: 'John Doe',
  email: 'john@example.com',
  address: null
}

const email = user?.email // returns 'john@example.com'
const phone = user?.phone // returns undefined
const city = user?.address?.city // returns undefined

console.log(email)
console.log(phone)
console.log(city)

const list = [1, 2, 3, 4]

const firstItem = list?.[0] // returns 1
const fifthItem = list?.[4] // returns undefined

console.log(firstItem)
console.log(fifthItem)

const car = {
  brand: 'Tesla',
  model: 'Model S',
  battery: {
    chargingTime: 2,
    capacity: 100
  }
}

const chargingTime = car?.battery?.chargingTime // returns 2
const autonomy = car?.battery?.autonomy?.city // returns undefined

console.log(chargingTime)
console.log(autonomy)

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b1f176add4f0e0ffb21a6e