在前端开发中，我们经常会遇到 undefined 和 null 的问题，这可能会导致我们的应用程序出现错误或异常。ES11 引入了 Optional Chaining 和 Nullish Coalescing，这两种新的语法可以帮助我们快速解决这些问题。
Optional Chaining
Optional Chaining 是一种新的语法，它允许我们在访问对象的属性或方法时，不需要先检查该对象是否存在。在以前，我们通常需要使用 && 运算符来检查对象是否存在，这样会使代码变得冗长和难以阅读。现在，我们可以使用 Optional Chaining 来简化代码。
基本语法
Optional Chaining 使用问号（?）来表示对象的属性或方法是否存在。假设我们有一个对象 person，它有一个属性 name，我们可以使用 Optional Chaining 来访问该属性：
const name = person?.name;
如果 person 对象存在，那么 name 变量将被赋值为 person.name 的值，否则 name 变量将被赋值为 undefined。
示例代码
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
-------- -
----- ----
-
--
-- -- -------- -------- -------
----- ---- - ----------------------
------------------ -- ----
----- --- - -------------------
----------------- -- ---------在上面的示例代码中，我们使用 Optional Chaining 访问了 person 对象的 address 和 job 属性。由于 person 对象存在 address 属性，所以 city 变量被赋值为 '北京'，而 job 属性不存在，所以 job 变量被赋值为 undefined。
Nullish Coalescing
Nullish Coalescing 是另一种新的语法，它允许我们使用默认值来解决 undefined 和 null 的问题。在以前，我们通常需要使用 || 运算符来设置默认值，但是 || 运算符有一个缺陷，它会将一些非布尔值转换为布尔值，这可能会导致一些意外的行为。现在，我们可以使用 Nullish Coalescing 来解决这个问题。
基本语法
Nullish Coalescing 使用两个问号（??）来表示默认值。假设我们有一个变量 x，我们可以使用 Nullish Coalescing 来设置默认值：
const y = x ?? defaultValue;
如果 x 的值是 null 或 undefined，那么 y 变量将被赋值为 defaultValue 的值，否则 y 变量将被赋值为 x 的值。
示例代码
-- -------------------- ---- ------- ----- --- - ----- ----- --- - ---------- ----- --- - -- -- -- ------- ---------- ----- ----- ------ - --- -- ---------- ----- ------ - --- -- ---------- ----- ------ - --- -- ---------- -------------------- -- --------- -------------------- -- --------- -------------------- -- -
在上面的示例代码中，我们使用 Nullish Coalescing 设置了三个变量的默认值。由于 foo 和 bar 变量的值是 null 和 undefined，所以 value1 和 value2 变量被赋值为 'default'。而 baz 变量的值是 0，所以 value3 变量被赋值为 0。
总结
ES11 引入了 Optional Chaining 和 Nullish Coalescing，它们可以帮助我们快速解决 undefined 和 null 的问题。使用 Optional Chaining 可以简化代码，使用 Nullish Coalescing 可以设置默认值。在实际开发中，我们可以根据需要选择使用哪种语法来提高代码的可读性和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510e2d795b1f8cacd944a47