在 ECMAScript 2021 中，新增了两个运算符：Optional Chaining 和 Nullish Coalescing Operator。它们可以组合使用，从而更好地处理 JavaScript 中的空值。
Optional Chaining
Optional Chaining（?）运算符用于处理 JavaScript 中的空值。在 JavaScript 中，如果尝试访问一个不存在的属性或方法，会抛出一个错误。例如：
const person = {
name: 'John'
};
console.log(person.age); // undefined
console.log(person.age.toUpperCase()); // TypeError: Cannot read property 'toUpperCase' of undefined在这种情况下，如果使用 Optional Chaining，可以避免出现异常错误。例如：
console.log(person.age?.toUpperCase()); // undefined
在这个例子中，如果 person.age 是未定义的，则会返回 undefined，而不是抛出一个异常错误。
Optional Chaining 运算符可以使用在两个地方：
- 对象属性：
object?.property - 方法调用：
object?.method()
Nullish Coalescing Operator
Nullish Coalescing Operator（??）运算符用于处理 JavaScript 中的空值。在 JavaScript 中，空字符串、0 和 false 它们在条件语句中都会被视为假值。因此，如果尝试使用条件语句判断一个值是否为真时，会出现问题。例如：
-- -------------------- ---- ------- ----- ------ - - ----- ------- ---- - -- -- ------------ - ------------------------ - ---- - ---------------- -- --- ------------ -
在这个例子中，因为 person.age 的值为 0，所以条件语句返回假值，并输出 "Age is not available"。但是，实际上， person.age 是有值的。
在这种情况下，可以使用 Nullish Coalescing Operator 运算符来处理空值。例如：
console.log(person.age ?? 'Age is not available'); // 0
Optional Chaining 和 Nullish Coalescing Operator 的组合使用
Optional Chaining 和 Nullish Coalescing Operator 运算符非常适合组合使用。它们的组合可以避免出现空值的异常错误，并正确处理空字符串、0 和 false 等假值的情况。例如：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- --
-------- -
------- ---- ---- ----
----- ----
-
--
---------------------- -- ---- -- --- ------------ -- -
-------------------------------- -- ----- -- --- ------------ -- ----- -- --- ----------在这个例子中，如果 person.age 的值为 0，则返回 0。而如果 person.address.city 是 null，则返回 "City is not available"。
如何使用
要使用 Optional Chaining 和 Nullish Coalescing Operator 运算符，需要使用 ECMAScript 2021 中的语法。你可以通过使用最新版本的 Chrome 或 Firefox 浏览器或者使用 Babel 等编译器来编译 JavaScript 代码。例如：
// 使用 Babel 来编译 ES6 代码 const age = person?.age ?? 'Age is not available'; console.log(age);
<!-- 使用 script 标签引入 Babel --> <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.17.0/babel.min.js"></script> <!-- 在 script 标签中添加 type="text/babel" 属性 --> <script type="text/babel"> const age = person?.age ?? 'Age is not available'; console.log(age); </script>
总结
Optional Chaining 和 Nullish Coalescing Operator 运算符非常适合组合使用，可以更好地处理 JavaScript 中的空值，并解决 JavaScript 中假值的问题。它们是 ECMAScript 2021 中非常实用的语法。
示例代码
最后，附上本文中使用的示例代码：
-- -------------------- ---- -------
----- ------ - -
----- -------
---- --
-------- -
------- ---- ---- ----
----- ----
-
--
------------------------ -- -
--------------------------------------- -- ---------
---------------------- -- ---- -- --- ------------ -- -
-------------------------------- -- ----- -- --- ------------ -- ----- -- --- ----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ce1ffab5eee0b5256120ab