ES11（也称为 ECMAScript 2020）是 JavaScript 的最新版本，其中引入了两个新运算符：可选链式调用和 nullish 合并。这些新特性可以帮助开发者更好地处理代码中的 null/undefined 值，同时也提高了代码的可读性。
可选链式调用（Optional Chaining）
在以前的版本中，当我们访问深层嵌套的对象属性或方法时，如果任何一级是 null 或 undefined，都会导致代码抛出 TypeError 错误，例如：
const user = {
name: 'Alice',
profile: {
email: 'alice@example.com'
}
}
const email = user.profile.email.toLowerCase(); // TypeError: Cannot read property 'toLowerCase' of undefined上面的代码试图获取用户的电子邮件地址并将其转换为小写格式。但是，由于 profile 对象可能是 null 或 undefined，我们需要首先检查它是否存在，例如：
if (user.profile && user.profile.email) {
const email = user.profile.email.toLowerCase();
}上面的代码解决了问题，但是代码看起来很冗长。在 ES11 中，我们可以使用可选链式调用运算符 ?. 来简化代码：
const email = user.profile?.email?.toLowerCase();
如果 user 或 profile 对象中的任何一个是 null/undefined，则这行代码会返回 undefined 而不是 TypeError。
还可以在可选链式调用中使用函数调用：
user.profile?.sendEmail('hello'); // 仅当 user 和 profile 对象不为 null/undefined 时才会调用 sendEmail 方法在上面的例子中，如果 profile 或 sendEmail() 方法不存在，代码将不会执行，而不是抛出错误。
Nullish 合并（Nullish Coalescing）
在 JavaScript 中，|| 运算符经常用于提供默认值，例如：
const name = user?.name || 'Unknown';
上面的代码将用户名称设为 user.name，或者如果 user.name 不存在则设为 'Unknown'。
然而，|| 运算符存在一个缺点，即它不能将 null 或 undefined 视为“无值”，而是将它们视为“有值”。例如：
const value1 = null || 'default'; // 'default' const value2 = undefined || 'default'; // 'default' const value3 = false || 'default'; // false const value4 = 0 || 'default'; // 'default'
根据上面的例子，如果 user.name 的值为 null 或 undefined，|| 运算符将赋默认值。
在 ES11 中，我们可以使用 nullish 合并运算符 ?? 来解决这个问题：
const name = user?.name ?? 'Unknown';
在上面的代码中，如果 user.name 值为 null 或 undefined，则会将其视为“无值”，并使用默认值 'Unknown'。
还可以使用 nullish 合并运算符来避免将假值（如 false、0、''）传递给函数，例如：
-- -------------------- ---- ------- -------- --------------- - ----- ------- - --- -- ------- -------- --------------------- - ------------- -- ------- ------- ----------------- -- ------- ------- --------------- -- -- ------------------ -- -----
上面的代码将显示消息参数 msg 的值，如果 msg 的值为 null 或 undefined，则为 'Hello, World!'。
结论
ES11 引入的可选链式调用和 nullish 合并是非常有用的新特性，可以让我们更轻松地处理 null/undefined 值。使用这些特性可以提高代码的可读性，同时在某些情况下也可以提高代码的性能。使用这些特性时，我们应该注意它们的优缺点，并且在确保代码清晰易懂的同时，尽可能避免过多的嵌套和多余的运算符。
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674caefda336082f25437fbf