在前端开发中，我们经常会遇到需要访问对象的属性或方法的情况。但是，由于对象可能不存在或者属性/方法可能未定义，这可能会导致代码出现错误。为了避免这种情况，ES12 引入了 Optional Chaining Operator（可选链运算符）。
Optional Chaining Operator 是什么？
Optional Chaining Operator 是一个新的运算符，它允许我们在访问对象的属性或方法时，检查对象是否存在或属性/方法是否已定义。如果对象不存在或属性/方法未定义，它将返回 undefined 而不是抛出错误。
Optional Chaining Operator 的语法如下：
object?.property object?.method()
其中，object 是要访问的对象，property 是要访问的属性，method 是要访问的方法。
Optional Chaining Operator 的使用场景
Optional Chaining Operator 通常用于访问深层嵌套的对象属性或方法。例如，我们要访问以下对象的 foo 属性：
const obj = {
bar: {
baz: {
foo: 'Hello World'
}
}
};我们可以使用 Optional Chaining Operator 来访问 foo 属性：
const foo = obj?.bar?.baz?.foo;
如果 obj 对象不存在或者 bar、baz、foo 属性未定义，foo 将会被赋值为 undefined。
Optional Chaining Operator 的错误捕捉实例
Optional Chaining Operator 不仅可以避免代码错误，还可以帮助我们捕捉错误。下面是一个错误捕捉的实例：
-- -------------------- ---- -------
----- --- - -
---- -
---- -
---- ------ ------
-
-
--
--- -
----- --- - ----------------------------------
- ----- ------- -
----------------------- ---------------
-在上面的代码中，我们尝试访问 foo 属性并将其转换为大写。但是，由于 foo 未定义，我们会遇到一个错误。我们可以使用 Optional Chaining Operator 来避免这个错误，并在错误发生时捕捉它。如果发生错误，我们将会看到以下错误信息：
Error: Cannot read property 'toUpperCase' of undefined
指导意义
Optional Chaining Operator 是一个非常有用的运算符，它可以帮助我们避免代码错误和捕捉错误。但是，我们应该谨慎使用它，因为它可能会导致代码变得复杂。在使用 Optional Chaining Operator 时，我们应该仔细考虑代码逻辑，并确保我们只在必要的情况下使用它。
总结
ES12 中的 Optional Chaining Operator 是一个非常有用的运算符，它可以帮助我们避免代码错误和捕捉错误。在访问深层嵌套的对象属性或方法时，我们可以使用 Optional Chaining Operator 来检查对象是否存在或属性/方法是否已定义。但是，我们应该谨慎使用它，并确保我们只在必要的情况下使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f8f884d10417a2224ae704