在 ES10 中使用 Optional chaining 让代码更优美

在日常前端开发中，经常需要进行数据的操作和访问。然而，当访问的对象中含有未定义的属性或方法时，就会导致代码出现错误。ES10 中引入了 Optional chaining 运算符，可以很好地解决这个问题，使得代码更加优美、简洁。

Optional chaining 运算符

Optional chaining 运算符 ?. 的作用是在访问对象属性或方法时，判断对象是否为 null 或 undefined，如果是，就不再执行后面的访问操作，直接返回 undefined，而不会抛出错误。

下面是一个使用 Optional chaining 的示例代码：

const userInfo = {
  name: 'Tom',
  age: 20,
  address: {
    city: 'Beijing',
    country: 'China'
  }
}

const country = userInfo.address?.country
console.log(country) // "China"

const phone = userInfo.phone?.number
console.log(phone) // undefined

可以看到，在访问 userInfo 对象的 address 属性时，使用了 Optional chaining 运算符，如果 address 属性不存在，就返回 undefined，不会导致代码错误。

使用 Optional chaining 改进代码

使用 Optional chaining 运算符可以改进一些常见的代码模式，使得代码更加简洁、易于读写。

检查对象是否存在

在访问对象属性或方法时，需要先检查对象是否存在，这是一种常见的代码模式。使用 Optional chaining 运算符可以简化这个模式，如下所示：

const user = {
  name: 'Tom',
  age: 20
}

if (user && user.address && user.address.city) {
  console.log(user.address.city)
}

console.log(user?.address?.city)

可以看到，在访问 user 对象的 address 属性和 city 属性时，使用了 Optional chaining 运算符，如果对象不存在，则不继续访问后续属性，直接返回 undefined。

链式调用方法

在进行方法调用时，需要先检查对象是否存在，然后再调用方法，这也是一种常见的代码模式。使用 Optional chaining 运算符可以简化这个模式，如下所示：

const data = {
  getData() {
    return {
      name: 'Tom',
      age: 20
    }
  }
}

if (data && data.getData && data.getData()) {
  console.log(data.getData().name)
}

console.log(data?.getData()?.name)

可以看到，在调用 data 对象的 getData 方法时，使用了 Optional chaining 运算符，如果对象不存在，则不继续访问后续方法，直接返回 undefined。

注意事项

在使用 Optional chaining 运算符时，需要注意以下事项：

• ?. 运算符优先级较低，可以加括号以提高优先级；
• ?. 运算符不能用于属性赋值操作；
• ?. 运算符不能与 delete 运算符一起使用。

总结

Optional chaining 运算符是 ES10 的一个新特性，可以很好地解决对象属性和方法不存在时的错误问题，使得代码更加优美、简洁。在实际开发中，使用 Optional chaining 运算符可以改进一些常见的代码模式，让代码更加易于读写。然而，在使用过程中也需要注意一些注意事项。建议开发者掌握 Optional chaining 运算符的使用方法，以提高开发效率、写出更好的代码。

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