介绍
ES11（也称为 ECMAScript 2020）带来了一些新的空值相关操作符，如空值合并运算符和可选链操作符，这些操作符可以帮助我们更容易地处理 JavaScript 中的空值问题并避免常见的陷阱。这篇文章将详细介绍 ES11 中的空值和空值合并，以及如何避免 JavaScript 常见的坑点。
空值概念
在 JavaScript 中，空值有两种类型：null 和 undefined。它们都代表缺少值，但是它们的使用场景略有不同。
null表示一个空对象指针，即该变量指向一个不存在的对象。undefined表示变量已经声明，但是没有赋值，或者属性不存在。
空值合并运算符
空值合并运算符（??）是 ES11 中引入的新操作符，它可以用来处理 null 或 undefined 的情况。它的语法为 a ?? b，表示如果 a 的值为 null 或 undefined，那么返回 b 的值，否则返回 a 的值。
使用空值合并运算符的好处是可以避免使用通常会出现的代码：
let someVar = null; let anotherVar = someVar || "default"; // ^ 这里的代码意思是如果 someVar 是 null 或者 undefined，使用 "default" 来代替 // 但是如果 someVar 的值是 false，那么 anotherVar 也会等于 "default"
这个代码还是比较冗长的，并且存在一些风险。比如在某些情况下，someVar 的值可能是 false，而 false 值通常被认为是一个蓝色的值，如果在这种情况下使用逻辑操作符 ||，那么将会返回默认值，这不是我们希望的结果。
现在我们可以使用空值合并运算符优化这个代码：
let someVar = null; let anotherVar = someVar ?? "default";
这将会更简约并且更易于阅读。
可选链操作符
在 ES11 中，我们还可以使用可选链操作符（?.）来避免在访问对未定义或者 null 的值进行调用时抛出 TypeError 异常。而不需要对访问的属性进行检查。这种行为称为在 JavaScript 中的“短路评估”。
下面是一个简单的示例，演示了可选链操作符可以如何安全地访问嵌套对象：
-- -------------------- ---- -------
--- ---------- - -
---- -
---- -
---- --------
-
-
--
--- --- - -----------------------
-- -- --------- ----- --- - --- --- --------- - ----
--- --- - --------------------------
-- -- ------- -- --- -------- --------- -- ------------- ---------使用可选链操作符的好处是可以避免在使用访问某些未定义的属性时抛出 TypeError 异常，这是 JavaScript 中非常常见的捕获异常方式。
避免常见的坑点
在 JavaScript 中，可能存在一些常见的坑点，使用空值和空值合并运算符时我们需要注意，以避免这些问题。
一些 JavaScript 中的常见陷阱包括：
- 布尔运算符将 false 的值视为空值。这意味着如果使用布尔运算符时，false 值将被视为 null 或 undefined，而布尔值 true 使用布尔运算符时，它将被视为非空。
- 在使用空值合并运算符时，注意当值为 0 或者 "" 时会被视为非空值。
- 一些对象或数组属性如果是空数组或者空对象，在使用可选链运算符时也会抛出错误。因为属性是已经存在的，但是它们的值为空，这通常是无意中发生的。在使用可选链操作符时，需要检查为空属性的情况。
总结
ES11 中的空值合并运算符和可选链操作符是非常有用的，可使我们的代码更优雅、更简介。但是在使用时需要小心，避免陷入 JavaScript 中的陷阱。使用此操作符可以使代码更加容易维护，也使调试过程更加轻松，可以避免大量的异常和错误的捕捉，在你领略到其魅力与易用性的同时也需时刻记得谨慎使用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf7aa8b5eee0b5256c2db9