JavaScript学习-可选链 (Optional Chaining)“?“

可选链 (Optional Chaining)“?”

• 是一种简化访问可能为null或undefined的属性或方法的语法特性，通过在属性和方法调用之前添加“?”来实现，这样的话，若前面的表达式的值为null或undefined，整个表达式将会短路，而不会引发错误。

1. 访问对象属性

// 在没有可选链之前的写法
const name = user && user.address && user.address.city;

// 使用可选链
const name = user?.address?.city;

• 在上述代码中，若user或user.address为null或undefined，可选链会使整个表达式返回undefined，而不会引发错误。

2. 调用函数

// 在没有可选链之前的写法
const length = str && str.length;

// 使用可选链
const length = str?.length;

• 如果str为null或undefined，可选链将返回undefined，而不会导致错误。否则length会等于str.length。

3.数组元素访问

// 在没有可选链之前的写法
const element = arr && arr[2];

// 使用可选链
const element = arr?.[2];

4. 链式调用

// 在没有可选链之前的写法
const result = obj && obj.method && obj.method();

// 使用可选链
const result = obj?.method?.();

5. 链式调用与赋值

// 在没有可选链之前的写法
let value;
if (obj && obj.property && obj.property.value) {
  value = obj.property.value;
} else {
  value = defaultValue;
}

// 使用可选链
const value = obj?.property?.value ?? defaultValue;

• 以上注意最后的双问号，“??”，它前面看作一个整体，若obj或obj.property不为null或undefined，则返回obj.property.value给value，否则返回defaultValue给value。