随着 Web 应用程序的复杂度越来越高，开发者们需要一种方法来处理可能的空值和 undefined 错误。ES10 中新的可选链特性就提供了一种优雅的解决方案。本文将向大家介绍这个新特性的使用技巧。
可选链是什么？
在 ES10 中，我们可以使用可选链 ?. 来避免因为不确定的值（如 undefined 或 null）而引发的 TypeError。它的语法如下所示：
object?.property
如果 object 存在，那么就会返回 property。如果 object 不存在或者为 null 或者 undefined，那么就会返回 undefined。这种写法可以避免了在已经访问到 null 或者 undefined 的对象或属性时，程序抛出异常而停止执行的情况。
可选链的使用技巧
链式调用
我们通常在处理对象的属性或者方法的时候会进行一些链式操作，这时候使用可选链就可以让代码更加简洁。举个例子，我们有一个对象 employee，里面存储了公司员工的信息，它的上级信息也在其中。我们需要获取这个员工的上级的名字，代码可能会写成这样：
const bossName = employee && employee.superior && employee.superior.name;
这样的代码虽然能完成任务，但是显然很复杂而且可读性差。如果我们使用可选链就会简单许多：
const bossName = employee?.superior?.name;
函数调用
使用可选链不仅可以方便地获取对象属性，也可作为函数调用时隐藏整个函数调用。举个例子，我们拥有一个 handleButtonClick 函数，但在某些场景下它可能不存在，我们可以通过可选链的方式来简单地调用它：
element?.addEventListener("click", handleButtonClick);这里如果 element 存在，那么就会为其添加一个点击事件，并调用 handleButtonClick 函数。如果 element 不存在，那么这行代码就会直接返回并不会执行后面的操作。
组合可选链
可选链可以组合使用，这样就可以让代码的可读性更高。举个例子，我们拥有一个数组 users，里面包含了一些用户对象，用户对象又包含了一些信息，里面可能有些信息不是必须的，使用可选链就可以简单地获取是否存在。
const hasLocation = users?.[0]?.location?.name;
这里如果 users 的第一个元素存在，它的 location 也存在，那么就可以方便地获取 name 属性。
可选链的兼容性
可选链是 ES10 的新特性，目前只有较新的浏览器支持。如果需要兼容旧版浏览器，可以使用第三方库 Lodash 来实现类似的功能。
总结
在本文中，我们学习了 ES10 新特性可选链的使用技巧。可选链可以用来避免因为不确定的值而导致的 TypeError，可以让代码更加简洁易读。我们可以将可选链用于链式调用、函数调用和组合可选链等场景。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647cb8d8968c7c53b07afd31