在 JavaScript 应用程序中，处理数据时经常需要检查对象和属性是否存在。为了简化这个过程并减少代码的复杂性，ES12 引入了可选链 (?.) 和空值合并 (??) 运算符。
本文将介绍这两个运算符的用法和技巧，以及如何正确地使用它们。
可选链 (?.) 运算符
可选链运算符可以简化检查深层嵌套对象的代码。在使用可选链运算符时，如果对象或属性不存在，则返回 undefined，而不是产生一个错误。这使得代码更加简化，并减少了代码的长度。
使用传统的 JavaScript 方式
在传统的 JavaScript 中，你必须使用繁琐的代码来检查深层嵌套对象的属性是否存在。例如：
if (user && user.address && user.address.street) {
console.log(user.address.street);
}这里，我们首先检查 user 是否存在，然后检查 user.address 是否存在，并检查 user.address.street 是否存在。如果不检查，任何一个属性不存在，都会导致程序崩溃。
使用可选链运算符
使用可选链运算符，代码可以简单得多，如下所示：
console.log(user?.address?.street);
如果 user、address 或 street 不存在，代码将保持静默，并在控制台上打印 undefined。
嵌套使用可选链运算符
在深层嵌套结构中使用可选链运算符时，你可以嵌套多个运算符。例如：
console.log(user?.address?.city?.country?.name);
在这个例子中，如果任何一个属性不存在，结果都将显示 undefined。
空值合并 (??) 运算符
当处理变量或属性值时，有时希望避免使用 null 或 undefined 值。在这种情况下，空值合并运算符提供了一种快速而便捷的方法。
传统的 JavaScript 方式
在传统的 JavaScript 中，我们通常使用三元表达式来处理变量值为空时的情况。例如：
const result = variable !== null && variable !== undefined ? variable : 'default value';
在这个例子中，我们检查变量是否为 null 或 undefined。如果变量的值存在，则将变量的值返回，否则返回一个默认值。
使用空值合并运算符
ES12 中的空值合并运算符可以简化这个过程，如下所示：
const result = variable ?? 'default value';
当变量的值为 null 或 undefined 时，将返回默认值。
示例代码
下面是一个示例代码，展示了如何使用可选链 (?.) 运算符和空值合并 (??) 运算符。
-- -------------------- ---- -------
----- ---- - -
--- --
----- ------
-------- -
------- ---- ---- -----
----- ----------
------ -----
--
--
----- -------- - ---------- -- ----------
----------------------
----- ------- - ---------------------------- -- ----------
---------------------在这个例子中，我们首先使用可选链运算符来检查 user 对象是否存在，然后使用空值合并运算符来检查 user.name 属性是否存在。最终，我们将结果赋给 lastName 变量。
接下来，我们使用可选链运算符来检查 user.address.city.country 属性是否存在，然后使用空值合并运算符来提供默认值。最终，我们将结果赋给 country 变量。
结论
ES12 中的可选链 (?.) 运算符和空值合并 (??) 运算符使得处理嵌套和空值情况的代码更加容易和简洁。通过使用这些运算符，你可以减少代码的长度，并更容易地处理大型应用程序中的数据。在编写 JavaScript 应用程序时，请务必掌握这些运算符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67049402d91dce0dc84f562a