随着 JavaScript 代码规模的不断增加，JavaScript 开发人员可能会发现自己在代码中频繁使用条件式来处理 null 或 undefined 值，这会使代码变得冗长且难以维护。在 ES11 中，引入了两个新操作符来解决这个问题：可选链操作符（optional chaining operator）和 nullish 合并运算符（nullish coalescing operator）。本文将对这两个操作符进行详细介绍，并提供相关的示例代码供读者参考。
可选链操作符
可选链操作符是一个问号 ?，并跟着一个句点 .。它可以用来在访问一个嵌套的对象时，判断该对象及其嵌套属性是否存在，如果存在则返回其值，否则返回 undefined。
下面是一个使用可选链操作符的示例：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- ---
-------- -
----- ---- ------
-------- -------
-
--
------------------------------------ -- ---------在这个示例中，我们尝试访问 person 对象的 address 属性的 street 属性。由于 address 属性存在，但是 street 属性不存在，因此会返回 undefined。
需要注意的是，可选链操作符只能用于对象属性的访问，不能用于调用对象的方法。例如，以下代码是无效的：
myArray?.sort(); // Invalid
如果要对函数进行调用，需要使用一些其他的技巧，如下所述。
nullish 合并运算符
在 JavaScript 中，当使用逻辑或运算符 || 时，如果其左操作数为 falsy 值（false、0、空字符串、null、undefined），则返回右操作数。这就导致了一个问题，即不能使用 || 来处理 null 或 undefined 变量的默认值。
在 ES11 中，引入了 nullish 合并运算符 ??，它就是为了解决这个问题而存在的。当左操作数为 null 或 undefined 时，返回右操作数；否则返回左操作数。
以下是一个使用 nullish 合并运算符的示例：
const message = prefs.message ?? 'Default message'; console.log(message); // 'Default message'
在这个示例中，如果 prefs.message 为 null 或 undefined，则使用默认值；否则使用 prefs.message 的值。
需要注意的是，如果使用 nullish 合并运算符来提供函数的默认参数值，需要将所有这样的参数都放在参数列表的最后。例如：
function greet(message, name, options = {}) {
const greeting = `${message} ${name ?? 'World'}`;
// ...
}在这个示例中，options 可以使用 nullish 合并运算符提供默认值，因为它是最后一个参数。如果 options 不是最后一个参数，则无法使用 nullish 合并运算符。
指导意义
ES11 中的可选链操作符和 nullish 合并运算符可以极大地简化代码，并使其更易于阅读和维护。使用这些新操作符可以避免大量的 if/else 语句，使代码更加优雅。
然而，需要注意的是，这些新操作符并不是解决所有问题的万能钥匙。在某些情况下，仍然需要编写经典的条件语句。需要根据实际情况来选择使用哪种方法。
总之，了解这些新操作符对于所有的前端开发者来说都是非常重要的，可以提高代码质量和开发效率。
总结
本文详细介绍了 ES11 中的两个新特性：可选链操作符和 nullish 合并运算符。通过了解这些新操作符，可以使代码更加简洁，易于阅读和维护。
使用示例代码演示了这两个新特性的用法和局限性。需要注意，这些新操作符并不是解决所有问题的万能钥匙，需要根据实际情况选择使用哪种方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd847595b1f8cacdce0235