在 ES2019 中使用 Optional Chaining
在前端开发中，经常会遇到深层次的对象属性或方法调用，而这些属性或方法有可能存在且有可能不存在。在过去，开发者需要通过一些繁琐的判断来避免这种情况。而在 ES2019 中，Optional Chaining 的出现为我们解决了这个问题。
Optional Chaining 是一种新的语法，它允许我们在调用对象属性或方法时，不需要显式地判断它是否存在。如果该属性或方法存在，则会返回它的值；如果不存在，则返回 undefined。
下面是一个示例代码：
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
--
-------------------------- -- -- -------
-------------------------- -- -- ---------在上面的代码中，我们使用了 ?. 来代替了传统的 .，这样就可以避免在调用不存在的属性或方法时出现错误。
Optional Chaining 还可以与其他操作符结合使用，例如：
const arr = [1, 2, 3]; console.log(arr?.[0]); // 输出 1 console.log(arr?.[3]); // 输出 undefined
在上面的代码中，我们使用了 ?.[] 来代替了传统的 []，这样就可以避免在访问不存在的数组元素时出现错误。
除了使用 ?. 来调用属性或方法之外，Optional Chaining 还可以使用在函数调用中。例如：
const obj = {
sayHello() {
console.log('hello');
}
};
obj?.sayHello?.(); // 输出 'hello'在上面的代码中，我们使用了 ?.() 来代替了传统的 ()，这样就可以避免在调用不存在的方法时出现错误。
总结
Optional Chaining 是一种非常实用的语法，它能够帮助我们简化代码并避免出现一些繁琐的判断。它的出现不仅仅是为了方便我们的开发，更是为了提高我们代码的可读性和可维护性。
虽然 Optional Chaining 在 ES2019 中才出现，但它已经被广泛地应用到了前端开发中。因此，学习 Optional Chaining 对我们来说是非常重要的。
在使用 Optional Chaining 时，我们需要注意它的兼容性问题。目前，它的兼容性并不是很好，需要使用 babel 等工具进行转换才能在一些老的浏览器中使用。
参考代码
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
--
-------------------------- -- -- -------
-------------------------- -- -- ---------
----- --- - --- -- ---
---------------------- -- -- -
---------------------- -- -- ---------
----- --- - -
---------- -
---------------------
-
--
------------------ -- -- -------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6555908fd2f5e1655dfd2309