?.、??、??=的区别

发表于 | 分类于 |

开发中经常会有一些简单的逻辑判断要写，语言本身也提供了一些简化的写法，比如三目运算、与或运算、空值合并运算等。由于空值合并运算符用得比较少，经常记不住，所以这里总结一下。

可选链(?.)

在工作中，经常会有一些值的类型不确定（或者说在某些场景下类型不确定），直接取值就会出错，所以 es6 提供了可选链式操作，对比如下：

1
2
3
let a; // undefined
a.b; // Uncaught TypeError: Cannot read properties of undefined (reading 'b')
a?.b; // undefined

可见，使用可选链式操作可以避免一些运行时错误，也可以精简代码。

空值合并运算符(??)

大多数情况我们判断一个值是否存在，不存在则使用或运算，如果这个值是一个假值（0 或者 false）就需要使用 if else 来判断了。空值合并运算可以解决这个问题，空值会去判断是 null 或者 undefined，而不是所有的假值。

1
2
3
4
5
6
7
8
// a为假，当a为空时b为真
let a = false,let b;
// 使用if else
if (a===null||a===undefined) {
    b = true
}
// 使用空值合并运算符
b = a ?? true

是不是要简洁多了。

空值赋值运算符(??=)

其实空值赋值运算和空值合并运算有点类似了，只是写法上有一点区别，如：

1
2
let a = false;
let b = (a ??= true);

[越努力，越幸运！]