ECMAScript 2019 的新 API：可选链式操作符和 nullish 合并运算符
在 JavaScript 中，处理 null 或 undefined 的情况常常是我们需要考虑的问题。然而，这些问题也常常给我们带来许多不必要的麻烦。好消息是，在 ECMAScript 2019 中引入了两个新 API，即可选链式操作符和 nullish 合并运算符，这些新 API 可以显著缓解我们在对待 null 或 undefined 时的困扰。
可选链式操作符
在早些版本的 JavaScript 中，如果访问一个对象属性的时候发现该属性为 null 或 undefined，我们需要使用繁琐的条件语句（例如 if 或者 ternary）来进行判断。这样的代码显然很难理解和维护。不过在 ECMAScript 2019 中，我们得到了一种更加优雅的方式来处理这个问题：可选链式操作符。
可选链式操作符通过使用 ?. 来简化我们处理 null 或 undefined 属性的代码。它可以用于任何类型的属性访问，包括函数、关系表达式以及数组下标。下面的示例代码展示了使用可选链式操作符的情况：
const foo = { bar: { baz: 'hello' } }
console.log(foo.bar.baz) // hello
console.log(foo.bar.qux) // TypeError: Cannot read property 'qux' of undefined
console.log(foo.bar?.baz) // hello
console.log(foo.bar?.qux) // undefined
console.log(foo.baz?.qux) // undefined从上面的示例代码中可以看出，使用可选链式操作符可以减少我们在访问属性时的代码量，也可以避免因为调用不存在的属性而导致的错误。
nullish 合并运算符
另一个常见的 JavaScript 问题是合并运算符（如 ||）不能够很好地处理 null 或 undefined。当使用 || 运算符时，如果左边的表达式为 falsy 值，那么左边表达式的结果就会被忽略，而整个表达式将返回右边表达式的值，即使其也是 null 或 undefined。这种处理方式不仅不直观，而且还容易出错。为了解决这个问题，ECMAScript 2019 引入了 nullish 合并运算符（??）。
nullish 合并运算符仅仅在左边的表达式为 null 或 undefined 的时候才会返回右边表达式的值。如果左边表达式的值为 0、'' 或者 false，那么该值仍然会被视为非 null-ish 值。下面的示例代码比较了使用 || 和 ?? 的结果：
// javascriptcn.com 代码示例 let foo = null let bar = 'hello' console.log(foo || 'world') // world console.log(bar || 'world') // hello console.log(undefined || 'world') // world console.log(0 || 'world') // world console.log(foo ?? 'world') // world console.log(bar ?? 'world') // hello console.log(undefined ?? 'world') // world console.log(0 ?? 'world') // 0
使用 nullish 合并运算符可以让你更好地处理 null 和 undefined 的情况，从而避免代码错误和意外行为。
总结
ECMAScript 2019 中的可选链式操作符和 nullish 合并运算符为开发人员提供了非常便利的语言工具。它们使得访问 null 或 undefined 对象和进行属性合并操作变得更加简单和直观。借助这些新 API，我们可以少写很多重复的代码，并且大大提升开发效率。如果你想更加深入地学习这些方法，可以访问官方文档，写一些示例代码并进行自行实验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654761927d4982a6eb1c0124