ES10 新特性亮点：可选链式调用和 nullish 合并运算符

JavaScript 是一门动态类型语言，它的灵活性为开发者带来了无数便利。但同时也带来了一些弊端，比如在处理嵌套对象时需要十分小心，防止出现 TypeError：Cannot read property 'xxx' of undefined/null 的错误。为了解决这个问题，ES10 引入了可选链式调用和 nullish 合并运算符。

可选链式调用

可选链式调用（Optional Chaining）是一种新的语法，它允许我们在访问嵌套对象时，当对象的某个属性/方法不存在时，不会再抛出 TypeError 错误。而是直接返回 undefined。

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  address: {
    city: 'Beijing',
    street: '123 Main St',
    zip: '100000'
  },
  hobbies: ['reading', 'traveling']
}

console.log(person.address && person.address.city) // Beijing
console.log(person.address && person.address.district) // undefined

// 使用可选链式调用
console.log(person?.address?.city) // Beijing
console.log(person?.address?.district) // undefined

在上面的例子中，如果地址的属性被移除或者访问的属性不在对象里，我们就会遇到不存在的问题。使用可选链式调用，我们不需要写一堆 if 语句去判断每一个属性是否存在，就能简单的访问它们。

nullish 合并运算符

nullish 合并运算符（Nullish Coalescing Operator）是一个新的逻辑运算符，它可以用于发现和使用默认值，尤其是当变量为 null 或 undefined 时。

// javascriptcn.com 代码示例
const name = ''
console.log(name || 'Anonymous') // Anonymous

const age = 0
console.log(age || 'Age Not Specified') // Age Not Specified

const address = null
console.log(address || 'Address Not Specified') // Address Not Specified

const city = ''
console.log(city ?? 'City Not Specified') // ''

在上面的例子中，|| 运算符只能检查 null 和 undefined，不能检查数字 0 或空字符串 。nullish 合并运算符 ?? 的行为与 || 运算符略微不同。它将检查左侧的操作数，只有在值为 null 或 undefined 时才返回右侧的默认值。

为何要使用这些新特性？

我们可以看到，可选链式调用和 nullish 合并运算符是极其有用又简洁的语法。特别是在处理嵌套对象或默认值时，会使代码更加清晰，简明明了。

既然这些新特性如此优秀，我们为什么不尽情享受它们带来的便利呢？而这也让我们在开发中更加真实的反映出我们想要的逻辑，避免了代码的复杂度和错误的发生。

总结

以上是 ES10 的两个重要新特性：可选链式调用和 nullish 合并运算符。它们让我们更加简单易读的写出代码，同时也减少了错误的发生。

尽管这些特性带来的是好处，但我们应该在使用它们时十分小心。因为这些新特性虽然强大，但有时候也会造成代码混乱，负责维护代码的人很难理解它们。任何新特性都有它正确的使用场景，我们应该适度使用。

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