在编写前端代码时，我们经常会遇到需要判断一个变量是否存在或者是否有值的情况。在过去，我们可能会使用 if 判断或者三元表达式来处理这种情况，但是这种方式会使代码变得冗长且难以维护。为了解决这个问题，ES2020 引入了可选链操作符和 nullish 合并操作符，这两个操作符可以帮助我们更简洁地处理这种情况。
可选链操作符
可选链操作符 ?. 可以帮助我们简化对于可能为 null 或 undefined 的变量的访问。以前，我们可能会写出如下的代码：
if (obj && obj.prop && obj.prop.value) {
console.log(obj.prop.value);
}这段代码会判断 obj 是否为 null 或 undefined，如果不是的话再判断 obj.prop 是否为 null 或 undefined，如果不是的话再判断 obj.prop.value 是否为 null 或 undefined。这种写法非常冗长且难以维护。使用可选链操作符可以将上面的代码简化为：
console.log(obj?.prop?.value);
如果 obj 或者 obj.prop 为 null 或 undefined，那么表达式的值就会变成 undefined，不会出现错误。这样的写法不仅更简洁，而且更易于阅读和维护。
nullish 合并操作符
nullish 合并操作符 ?? 可以帮助我们简化对于 null 或 undefined 变量的赋值。以前，我们可能会写出如下的代码：
const value = input || 'default';
这段代码会判断 input 是否为 null 或 undefined，如果是的话使用 'default' 来代替。但是这种写法存在一个问题，当 input 的值为 falsy 值（例如 0 或者 ''）时，也会被判断为 null 或 undefined，从而使用了 'default'。为了解决这个问题，我们可以使用 nullish 合并操作符：
const value = input ?? 'default';
这段代码只有在 input 的值为 null 或 undefined 时才会使用 'default'，其他情况下都会使用 input 的值。
示例代码
下面是一个使用可选链操作符和 nullish 合并操作符的示例代码：
-- -------------------- ---- -------
----- ---- - -
----- -
----- ----- -----
---- -----
-------- -
------- ---- ---- -----
----- ----------
------ -----
---- ----
-
-
--
----- -------- - ---------------- -- ------------
----- ------- - --------------- -- ----------
----- ---------- - --------------------------- -- ----------
----- -------- - ------------------------- -- ----------
----- --------- - -------------------------- -- ----------
----- ------- - ------------------------ -- ----------
---------------------- -- ----- ----
--------------------- -- ---------
------------------------ -- ---- ---- ----
---------------------- -- ---------
----------------------- -- ----
--------------------- -- ---------这段代码首先定义了一个包含嵌套对象的 data 变量，然后使用可选链操作符和 nullish 合并操作符来获取其中的值。如果某个值不存在，就会使用默认值。这样的写法不仅更简洁，而且更易于阅读和维护。
结论
使用可选链操作符和 nullish 合并操作符可以帮助我们更简洁地处理可能为 null 或 undefined 的变量，从而使代码更易于阅读和维护。这两个操作符已经被大多数现代浏览器所支持，因此可以放心地在项目中使用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753ec721b963fe9cc4b0b3a