在编写前端代码时，经常需要在获取某个对象的属性或方法前进行判断其是否为 null 或 undefined，在过去，我们常常使用繁琐、冗长的代码来实现，而在 ES2020 中引入了 Optional Chaining 操作符，可以使代码更加简洁易读，本文将介绍它的语法和使用，以及如何优雅地处理 null 和 undefined。
Optional Chaining 的语法和功能
Optional Chaining 使用问号 ? 来表示，它的作用是在获取一个对象的属性或方法前进行安全判断，如果这个对象不存在，就返回 undefined，而不会导致程序抛出异常，如下所示：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
---- -
------ -------
-------- -
----- -------
-
-
--
-- ----
----- ----------- - ------ -- ---------- -- ------------------ -- ------------------------
------------------------- -- -------
-- -- -------- --------
----- ------------ - ---------------------------
-------------------------- -- -------上面的代码中，我们想获取 person 对象中的 job 属性的 company 属性的 name 属性，传统写法需要使用繁琐冗长的判断，而使用 Optional Chaining 可以让代码更加简洁易读，同时避免了因对象不存在而导致的异常。
Optional Chaining 不仅可以用于获取对象属性，还可以用于调用方法或函数，例如：
-- -------------------- ---- -------
----- ------ - -
----- -----
---- ---
------- -
---------------------------------
-
--
-- ----
------------ -- --------------- -- ---------
-- -- -------- --------
----------------- -- ---------上面的代码中，我们传统写法中需要使用繁琐的判断，而使用 Optional Chaining 可以让代码更加简洁易读，同时避免了因方法或函数不存在而导致的异常。
处理 null 和 undefined 的技巧
有时候我们需要对一个变量进行 Optional Chaining，但这个变量可能会是 null 或 undefined，这时我们需要使用一些技巧来处理，例如：
const person = null; // 传统写法 const age = person && person.age; // 使用 Optional Chaining const age2 = person?.age; console.log(age2); // undefined
上面的代码中，我们将 person 设置为 null，传统写法中会将 age 的值也设置为 null，而使用 Optional Chaining 则返回 undefined，这时我们就需要多加一些处理，例如使用默认值：
const person = null; // 使用 Optional Chaining 和默认值 const age3 = person?.age ?? 0; console.log(age3); // 0
上面的代码中，我们使用了空值合并运算符 ?? 来为 age3 设置默认值，这样就可以避免出现 undefined 的情况了。
Optional Chaining 的兼容性
由于 Optional Chaining 是 ES2020 中的新特性，在一些旧版本的浏览器中可能会出现兼容性问题，可以使用 babel 等工具将其转换为 ES5 以提高兼容性。
结论
Optional Chaining 是一个非常实用的新特性，可以让我们的代码更加简洁易读，同时避免了因对象不存在而导致的异常，同时我们还介绍了一些处理 null 和 undefined 的技巧，希望本文能够给大家带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a4dd3d91dce0dc8803f55