js中优雅地在数组和函数使用可选链运算符的方法

可选链运算符

可选链运算符是一种非常简洁的对象的属性以及调用函数的，且不会报空指针错误的方法。如果使用可选链运算符访问对象的属性是undefined或null，这时表达式会短路并返回undefined，而不是抛出错误。

比如：

const person = {
  name: '张三',
  dog: {
    name: '阿黄',
  }
}

const catName = person.cat?.name
console.log(catName)
// 输出：undefined

如果没有使用可选链运算符，则代码会明显长很多，在复杂对象中，这种情况会非常明显。

比如上面的代码改成不使用可选链运算符：

const person = {
  name: '张三',
  dog: {
    name: '阿黄',
  }
}

const catName = person && person.cat && persion.cat.name
console.log(catName)
// 输出：undefined

一般来说对象的可选链运算符比较常见，而数组和函数的可选链运算符比较少见，但我们也会偶尔也会遇到，因为我们的数据也有数组，对象中也可能会包含函数。下面我们来看下这两种情况如何使用可选链运算符。

数组

对象的数组属性的可选链运算符用法：

const person = {
  name: '张三',
  dog: {
    name: '阿黄',
  }
}
let petName = person?.pets?.[0]?.name
console.log(petName)
// 输出undefined

函数

对象的函数调用可选链运算符用法：

const person = {
  name: '张三',
  dog: {
    name: '阿黄',
  }
}
let dogName = person?.dog?.getName?.()
console.log(dogName)
// 输出undefined

前端开发中，建议尽量使用可选链运算符，让您的代码更加优雅简洁。