ES9 中的新功能：可选 Chaining
在前端开发中，我们经常需要处理大量的嵌套对象或数组结构，并且需要从中获取某些属性或调用某些方法。在过去，这个过程可能需要使用多个 if 语句或者运用 ES6 的新特性 Object.keys 和 Array.reduce 来实现，但是这种方式仍然有些笨重。ES9 中新增的可选 Chaining 功能可以帮助我们更加优雅的解决这个问题。
可选 Chaining 是指利用 ?. 运算符在对象或数组结构上进行链式结构的属性调用或方法调用，在属性或者方法不存在时返回 undefined，而不会出现引用错误，大大提升了代码的健壮性和可读性。
下面是一个具体的示例：
-- -------------------- ---- -------
----- ---- - -
----- --------
-------- -
----- ---- ------
-------- -----
-
--
-- ----
----- ------- - ---- -- ------------ -- ---------------------
-- ---- --------
----- ------- - -----------------------可以看到，使用可选 Chaining 可以更简洁明了的获取属性值，同时代码的健壮性也得到了保证。
可选 Chaining 功能支持链式调用多层属性或方法，而且也可以嵌套在模板字符串中使用。下面是更加复杂的示例：
-- -------------------- ---- -------
----- ---- - -
------ -
--------- ---------- -------- ------------
-
--
----- -------- - ------------------------------ ---
----- ------- - -- ---- ---------- -- ------------
--------------------- -- - ---- ------- ------ ---------在上述示例中，我们首先使用可选 Chaining 获取 toppings 数组，然后使用默认值语法 ?? 来判断 toppings 是否为 null 或 undefined。如果 toppings 不为空，将会输出其每个元素分别以逗号分隔的值，否则会输出 'nothing'。
需要注意的是，可选 Chaining 只能在支持 ES9 或更高版本的浏览器或运行环境中使用。如果你需要向下兼容，可以考虑使用 Babel 等工具来转译代码。
总结：
可选 Chaining 功能是 ES9 中相当实用的新特性，可以帮助我们更加优雅地处理链式结构的属性或方法调用，提升代码的可读性和健壮性，同时也可以基于语法糖减少代码量和代码嵌套。在实际开发中，建议适当充分利用该特性，避免多余的 if 语句和代码判断，提高代码可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459b6be968c7c53b0bd1408