可选链运算符

使用

允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

const data = {
  age: 18,
  friend: {
    name: '李四',
  },
  name: '张三',
  sex: '男',
};

console.log(data.friend.name);

假设 data 是通过 ajax 获取的数据，data.friend.name 存在，则可以正常输出，如果不存在：

console.log(data.friend.name); // 报错：Uncaught TypeError: Cannot read property 'name' of undefined

所以这个时候我们平时就要做很多判断

console.log(data && data.friend && data.friend.name); // undefined

有了可选链运算符（?.）后，我们可以直接简写成

console.log(data?.friend?.name);

if (onError) { // 校验 onError 是否真的存在
  onError(err.message);
}

onError?.(err.message); // 简写

注意

如果存在一个属性名且不是函数，使用 ?. 仍然会产生一个 TypeError 异常 (x.y is not a function).

当使用方括号与属性名的形式来访问属性时，你也可以使用可选链运算符：

const nestedProp = obj?.['prop' + 'Name'];

const arrayItem = arr?.[42];

当在表达式中使用可选链时，如果左操作数是 null 或 undefined，表达式将不会被计算

const potentiallyNullObj = null;
let x = 0;
const prop = potentiallyNullObj?.[x++];

console.log(x); // x 将不会被递增，依旧输出 0

const a = false;
console.log(a?.split(',')); // a?.split is not a function

let object = {};
object?.property = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment