ECMAScript 2021 (ES12) 是 JavaScript 的最新版本，其中包含许多新的功能和语法。其中一个新的特性是空值合并运算符。这个运算符使得在处理可能为 null 或 undefined 的变量时变得更加简单和安全。本篇文章将介绍空值合并运算符的用法和示例，以及如何正确地使用这个运算符来编写更加可靠的前端应用程序。
空值合并运算符的概述
空值合并运算符是 ??，它的作用是当左侧操作数为 undefined 或 null 时，返回右侧操作数的值，否则返回左侧操作数的值。这个运算符非常适合用来默认赋值，避免在处理空值时出现错误。下面是一个简单的使用示例：
const result = a ?? 'default value'
在这个示例中，变量 result 将被赋值为 a 的值，除非 a 为 null 或 undefined，否则将被赋值为 'default value'。这个运算符还可以被用于更复杂的语句中，例如在函数调用中使用。
function myFunction(param) {
const value = param ?? getDefault()
// other code here
}
function getDefault() {
return 'default value'
}在上面的示例中，当 param 为 null 或 undefined 时，变量 value 将被赋值为 getDefault() 的返回值。
最佳实践
下面是一些最佳实践，可以帮助您正确地使用空值合并运算符：
使用空值合并运算符要小心，尤其是在涉及到计算值的时候。不要将一个可能为 null 或 undefined 的值转换为数字。
空值合并运算符不能处理空字符串。如果您需要处理空字符串，请使用布尔逻辑运算符。
使用默认参数来设置默认值，而不是使用空值合并运算符。
如果您的代码需要处理 null 或 undefined 这两个值，请确保测试用例涵盖了这些情况。
示例代码
下面是一些示例代码，可以帮助您更好地了解空值合并运算符的使用：
// javascriptcn.com 代码示例
const x = undefined
const y = null
console.log(x ?? 'default') // 输出: 'default'
console.log(y ?? 'default') // 输出: 'default'
console.log('' ?? 'default') // 输出: ''
function getName(obj) {
return obj?.name ?? 'no name'
}
console.log(getName({ name: 'John' })) // 输出: 'John'
console.log(getName(null)) // 输出: 'no name'
console.log(getName(undefined)) // 输出: 'no name'
function handleRequest(req) {
const param = req?.query?.param ?? 'default value'
// other code here
}在上面的示例中，我们可以看到如何在处理可能为 null 或 undefined 的变量时使用空值合并运算符。将这些示例应用到您自己的代码中，可以使您的前端应用程序更加清晰、健壮和可靠。
总结
在本文中，我们详细介绍了 ECMAScript 2021 (ES12) 的空值合并运算符。我们介绍了这个运算符的用法、最佳实践和示例代码，以及如何在前端应用程序中正确使用它。通过合理运用空值合并运算符，您可以帮助您的代码更好地处理可能的 null 和 undefined 值，从而使您的应用程序更加健壮、可读和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9f74ff6b2d6eab3140a8d