在前端开发中，我们经常需要处理一些数据，尤其是从后端返回的数据。在处理这些数据时，我们经常需要判断某个属性是否存在或者某个变量是否为空。在 ES12 中，新增了 Optional Chaining 和 Null Coalescing 这两个运算符，可以帮助我们更方便地处理这些情况。
Optional Chaining
Optional Chaining 运算符（?.）用于判断一个对象的属性是否存在，如果存在则返回该属性的值，否则返回 undefined。这个运算符非常适用于处理深层嵌套的对象。
下面是一个例子：
----- ---- - -
----- --------
-------- -
------- ---- ---- -----
----- ----------
------ -----
--
--
----------------------------------- -- ------ ---- ---
--------------------------------- -- ------------在上面的例子中，我们使用 Optional Chaining 运算符来判断 user 对象的 address 属性是否存在，如果存在则返回其中的 street 属性的值。第二个 console.log 语句中，我们判断 user 对象的 phone 属性是否存在，由于该属性不存在，所以返回 undefined。
Null Coalescing
Null Coalescing 运算符（??）用于判断一个变量是否为 null 或 undefined，如果是则返回一个默认值，否则返回该变量的值。这个运算符非常适用于设置默认值。
下面是一个例子：
----- ---- - ---------- ----- ----------- - ------- ---------------- -- ------------- -- -------
在上面的例子中，我们使用 Null Coalescing 运算符来判断 name 变量是否为 null 或 undefined，由于该变量为 undefined，所以返回默认值 defaultName。
使用 Optional Chaining 和 Null Coalescing 的组合
Optional Chaining 和 Null Coalescing 运算符可以一起使用，用于处理更加复杂的情况。
下面是一个例子：
----- ---- - -
----- --------
-------- -
------- ---- ---- -----
----- ----------
------ -----
--
--
----- ----- - -----
----- ------------ - ---------------
------------------------------- -- -------------- -- ---------------
------------------------------- -- -------- ------- -- ----------
------------------------------- -- --- ----- --------- -- ----- ----- ------在上面的例子中，我们使用 Optional Chaining 运算符来判断 user 对象的 phone 属性是否存在，如果存在则返回其中的 number 属性的值。由于该属性不存在，所以使用 Null Coalescing 运算符返回默认值 defaultPhone。
在第二个 console.log 语句中，我们判断 user 对象的 address 属性是否存在，如果存在则返回其中的 city 属性的值。由于该属性存在，所以返回该属性的值。
在第三个 console.log 语句中，我们再次判断 user 对象的 phone 属性是否存在，由于该属性不存在，所以使用 Null Coalescing 运算符返回默认值 'No phone number'。
总结
在本文中，我们介绍了 ECMAScript 2021 (ES12) 中新增的 Optional Chaining 和 Null Coalescing 运算符，以及如何使用它们来处理对象属性是否存在和变量是否为空的情况。这些运算符可以大大简化我们的代码，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d575a0add4f0e0ffd2d2fc