在 ES11 中使用 optional chaining 简化对象属性引用
随着 JavaScript 语言的发展，前端开发中对象和属性的引用显得越来越普遍。但是，对象属性的引用在很多时候会出现 null 或者 undefined 的情况，这时候就会报错。ES11 中新增了 optional chaining 这一特性，可以避免这样的报错。
optional chaining 可以将一个对象的多个属性链接在一起，并在链中的每个属性是否存在进行安全的检查，如果该属性不存在，则返回 undefined，避免程序中出现异常情况。在实际开发中，optional chaining 可以使我们的程序更加健壮和可靠。
optional chaining 的语法为 ?，可以用在对象属性和方法的访问中。下面是一个简单的 optional chaining 的示例代码：
const obj = { a: { b: 1 } };
console.log(obj?.a?.b);
console.log(obj?.c?.d);在这个示例代码中，我们可以看到 obj?.a?.b 和 obj?.c?.d 分别输出了 1 和 undefined 。如果没有 optional chaining，那么调用 obj.c.d 时会导致错误。
为了更好地理解 optional chaining 的作用，我们来看一个实际的开发场景。假设我们正在编写一个播放器组件，需要从网络加载歌曲信息，并根据歌曲信息渲染到页面上。
歌曲信息一般是一个对象，里面包含了很多属性，比如歌曲名称、演唱者、专辑封面等等。但是，在网络加载的过程中，有时候会出现加载失败或者加载完成但是数据格式不正确的情况。为了避免程序崩溃，我们需要对歌曲信息进行安全的访问。这时候，就可以使用 optional chaining 来简化我们的代码。下面是一个简单的歌曲信息加载和渲染的示例代码：
-- -------------------- ---- -------
----- -------- ----------------- -
--- -
----- -------- - ----- --------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
------ -----
-
-
-------- -------------------- -
----- ----- - ------------
----- ------ - -------------------------
----- ---------- - ----------------------
------ -
-----
---- ------------------- ---------------
-----------------
----------------
------
--
-
------ ---------- -
----- ---- - ----- -----------------------
----- -------- - ---------------------
----------------------- - ---------
-----在这个示例代码中，我们定义了两个函数 fetchSongInfo 和 renderSongInfo。fetchSongInfo 用于从网络加载歌曲信息，而 renderSongInfo 则用于将歌曲信息渲染到页面上。
在 renderSongInfo 中，我们使用了 optional chaining 来访问歌曲信息。如果歌曲信息中某个属性不存在，那么代码不会报错，而是返回 undefined。这样，即使网络加载失败或者歌曲信息格式不正确，我们的代码也可以正常运行。
总结：
在前端开发中，安全访问对象属性是非常关键的。ES11 中的 optional chaining 可以帮助我们避免访问不存在的属性时出现异常情况。通过合理地使用 optional chaining，我们可以写出更加健壮和可靠的程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648404f848841e9894336f6e