前言

JS中 ?. 、??、??=用法以及使用场景_前端

这个错误相信不少的前端工程师都遇到过，在开发过程中，难免会遇到。要么就是自己考虑不全造成的，要么就是后台返回数据或者传输数据造成的，因此，做非空判断就成了一件必不可少的事情，下面介绍一些es6新语法方便我们开发。

可选链式操作符

1.1 可选链操作符允许您在访问对象属性或调用函数时，检查中间的属性是否存在或为 null/undefined如果中间的属性不存在或为空，表达式将短路返回 undefined，而不会引发错误

let obj = { 
   data: {
       third: 43
   }
}
console.log(obj?.data?.third) // 使用可选链式操作符后，只要前面有一个属性为空或者undefined，即返回undefined，不会引发错误

在传统判断写法中，我们通常会这么做，需要手动检查某个属性，或者是具体业务中使用if判断某个属性是不是为 null 或 undefined
obj && obj.data && obj.data.third

1.2 使用场景

调用可能为 null 或 undefined 属性的时候
链式访问某个对象的属性的时候，不必在手动检查某个属性

空值合并运算符

2.1 空值合并运算符，即在变量的值是 null 和 undefined 的时候，为变量提供一个默认值，否则返回变量本身的值

'hello world' ?? 'hi' 
// 'hello world' 
'' ?? 'hi' 
// '' 
false ?? 'hi' 
// false 
null ?? 'hi' 
// 'hi' 
undefined ?? 'hi' 
// 'hi'
**在传统写法中，空字符串以及0，转布尔类型是false，会被默认为假，而在新的语法中，成功的兼容了此问题**

2.2 使用场景

提供默认值，而不使用 falsy 值（如空字符串、0 等）
在处理可能为 null 或 undefined 的变量时，选择性地提供备用值

空值合并赋值操作运算符

3.1 当??=左侧的值为 null、undefined 的时候，才会将右侧变量的值赋值给左侧变量，其他所有值都不会进行赋值

let b = '你好'; 
let a = 0;
let c = null; 
let d = '123';
b ??= a; // b = '你好”'
c ??= d // c = '123'

3.2 使用场景

可以在在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量

结语

这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。
然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中
可能不被支持。