ES6链判断运算符(?.)和Null判断运算符（??）

一、参考

1. 链判断运算符
2. 可选链介绍

二、语法介绍

1. obj?.prop：判断 obj.prop属性是否存在，没有就返回undefined
2. obj?.[expr]：判断obj[expr]属性是否存在，没有就返回undefined
3. arr?.[index]：判断 obj[index]属性是否存在，没有就返回undefined
4. func?.(args)：如果存在 func()就执行，没有就返回undefined

三、链判断运算符（?.）

应用场景

// 错误的写法
const  firstName = message.body.user.firstName;

// 正确的写法
const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || 'default';

解决办法

const firstName = message?.body?.user?.firstName || 'default';

短路机制

?.运算符相当于一种短路机制，只要不满足条件，就不再往下执行。

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

delete 运算符

delete a?.b
// 等同于
a == null ? undefined : delete a.b

括号的影响

如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响。

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

四、Null 判断运算符（??）

const headerText = response.settings.headerText || 'Hello, world!';
const animationDuration = response.settings.animationDuration || 300;
const showSplashScreen = response.settings.showSplashScreen || true;

1. || 属性的值为null、undefined、为空字符串、false、0，默认值就会是 || 右边的值
2. ?? 只有运算符左侧的值为null或undefined时，才会返回右侧的值

优先级

??有一个运算优先级问题，它与&&和||的优先级孰高孰低。现在的规则是，如果多个逻辑运算符一起使用，必须用括号表明优先级，否则会报错。

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);

(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);

(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);

(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);

五、func?.(args)判断方法是否存在

func?.(args)：如果存在 func()就执行，没有就返回undefined

const animal = {
  say () {
    console.log('animal say!')
    return 'say'
  }
}

console.log(animal.say?.()) // 返回 say
console.log(animal.eat?.()) // 返回undefined