JS的可选链运算符（?.）的学习

Light rattle

已于 2023-04-01 14:38:00 修改

阅读量565

点赞数

文章标签： javascript 学习前端

于 2023-03-31 11:14:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47278656/article/details/129875062

版权

本文介绍了JavaScript的可选链运算符?.，它允许安全地访问深度嵌套的对象属性，即使中间路径可能为null或undefined。?.运算符在路径无效时返回undefined，而不会抛出错误。文中通过示例展示了其在数组索引和函数调用中的用法，强调了它在防止程序因尝试访问不存在的属性而中断的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可选链运算符（?.）学习

注;本文是学习可选链运算符（?.）¹的学习记录。

一、(?.)是什么

可选链运算符（?.）：允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符，不同之处在于，在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

二、语法（用法）

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

上面三种是?.的使用方法，不过(?.)与(.)不同的是，当使用的选择器是[XXX]这种数组索引选择时，也可以使用?.（如下面的例子）

三、使用例子

const numList = ['1', '2', '3', '4'];

var res_1 = numList?.[0] === '1';
var res_2 = numList?.[999] === '1';

console.log(res_1);
console.log(res_2);

运行结果：

> true
> false

四、后记

使用?.时候，如果没有找到对应的元素，会返回undefined，但它好处是不会引起报错（当选择一个不存在的元素时报错可能会影响程序的后续执行）。

参照：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining ↩︎