JavaScript 可选链操作符(?.)

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

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。

一、语法

obj?.prop;
obj?.[expr];
arr?.[index];
func?.(args);

额，先来简单的使用下：

const obj = {
    name: '山呱呱',
    foo: {
      bar: {
        baz: 18,
        fun: ()=>{}
      },
    },
    school: {
        students: [{
            name: 'shanguagua'
        }]
    },
    say() {
        return 'www.shanzhonglei.com'
    }
  };

  console.log(obj?.foo?.bar?.baz);  // 18

  console.log(obj?.school?.students?.[0]['name']) // shanguagua

  console.log(obj?.say?.()) // www.shanzhonglei.com

操作符会隐式检查对象的属性是否为null或undefined，代码更加优雅简洁。

const name = obj?.name;
const name1 = obj === null || obj === undefined ? undefined : obj.name; // 等同于

二、使用场景

2.1 与函数调用结合

// 若obj有属性method但method不是函数, 则也会报错
const result = obj?.method?.();

2.2 处理可选的回调函数

function invoke(fn) {
  if (fn) {
    fn.call(this);
  }
}

// 写法更加简洁
function betterInvoke(fn) {
  fn?.call(this);
}

2.3 可选链和表达式

const obj = {
    propName: 'name'
};
console.log(obj?.['prop' + 'Name']); // name

2.4 可选链不能用于赋值

const obj = {
    propName: 'name'
};
obj?.['propName'] = 'new name'; // Syntax Error

2.5 访问数组元素

const first = arr?.[0];

2.6 短路特性

当可选链左侧为null 或 undefined 时, 后续操作不会执行。

const name = a?.b?.c?.d;

但在实际开发中，我们需要一个默认的值，此时就可以使用双问号??操作符。

const name = a?.b?.c?.d??'shanguagua';

最后

欢迎关注我的公众号【前端技术驿站】，多多交流，共同进步！
回复react:
1、React.js大众点评案例完整版
2、React+TypeScript高仿AntDesign开发企业级UI组件库
3、React17+React Hook+TS4最佳实践 仿Jira企业级项目
回复vue
1、[全栈开发 ]Vue+Django REST framework 打造生鲜电商项目
2、核心源码内参
3、Vue3+ElementPlus+Koa2 全栈开发后台系统
4、ES6零基础教学解析彩票
5、Node.js+Koa2框架生态实战 - 从零模拟新浪微博（完整版）
6、vue无人点餐收银系统
回复node
1、Nodejs视频教程
2、全栈最后一公里 - Nodejs 项目的线上服务器部署与发布
3、深入浅出Node.js