ES11 中新的可选链操作符：如何使用？
在前端开发中，处理对象和数组是非常常见的操作。有时候我们需要获取对象或数组的某个属性或元素，但是如果这个对象或数组不存在，我们就会遇到问题。以前，我们需要通过判断或写冗长的代码来避免这种错误。但是，ES11 中引入了一个新的可选链操作符 ?.，可以方便地处理这种情况。本文将介绍可选链操作符的用法和注意事项，并提供示例代码。
什么是可选链操作符？
可选链操作符 ?. 用于判断某个值是否为 null 或 undefined，如果是，它会返回 undefined，否则它会直接访问该值。这种操作符在处理对象和数组时非常有用，可以帮助我们简化代码，避免错误。
可选链操作符的语法
可选链操作符的语法非常简单，就是在要访问的属性或元素前面加上 ?.，例如：
obj?.prop // 访问 obj.prop，如果 obj 不存在返回 undefined arr?.[index] // 访问 arr[index]，如果 arr 不存在返回 undefined
可选链操作符的使用示例
下面是几个可选链操作符的使用示例，可以帮助你更好地理解它的用法和效果。
示例一：访问对象属性
-- -------------------- ---- ------- ----- ------ - - ----- ------- - -------------------------- -- ------- ------------------------- -- --------- ----- ------- - ---------- --------------------------- -- ---------
示例二：访问数组元素
const arr = ['a', 'b', 'c']; console.log(arr?.[0]); // 'a' console.log(arr?.[3]); // undefined const empty = []; console.log(empty?.[0]); // undefined
示例三：函数调用
可选链操作符还可以用于函数调用，这种情况下如果函数不存在，则会直接返回 undefined。
const obj = {
func: function() {
return 'hello';
}
}
console.log(obj?.func?.()); // 'hello'
console.log(obj?.unknown?.()); // undefined示例四：链式调用
可选链操作符还可以用于链式调用，这种情况下如果前面的值不存在，则整个表达式会直接返回 undefined。
-- -------------------- ---- -------
----- --- - -
-- -
-- -
-- -------
-
-
-
-------------------------- -- -------
-------------------------------- -- ---------
-------------------------------- -- ---------
------------------------ -- --------------可选链操作符的注意事项
尽管可选链操作符非常有用，但是我们还需要注意一些事项，以免在使用中出现问题。
可选链操作符只能用于 ECMAScript 2020（即 ES11）及以上版本的 JavaScript 中。
可选链操作符不能用于 ECMAScript 5 及以下版本的 JavaScript，如果你的项目需要兼容旧版本的浏览器和 Node.js，就需要特别小心使用。
可选链操作符不能用于计算属性名，例如
obj?.[prop]是无效的，需要使用obj[prop]?.来访问可选属性。可选链操作符仅能访问到该值的属性或元素，不能修改其值。如果需要修改值，仍然需要使用普通的访问方式。
总结
可选链操作符是 ES11 中非常实用的新功能，可以让我们更加方便地处理对象和数组，提高代码的可读性和稳定性。在项目开发中，需要充分利用可选链操作符，但也需要注意其适用范围和限制。希望本文对读者在学习和使用可选链操作符方面有所帮助。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648058a848841e9894fd3130