可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(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';

最后

关注公众号【前端技术驿站】让我们共同进步吧！我整理了一些项目实战视频，欢迎来学习！