空值合并运算符??
??运算符是es2020(es11)的一个新特性，他是一个逻辑操作符，当左侧的操作为null或者undefined的时候，他会去执行右侧的操作，否则返回左侧的操作。
1
2
| const test = null;
const value = test ?? "ok"; // ok
|
1
2
| const test = undefined;
const value = test ?? "ok"; // ok
|
他和||或运算符又有什么区别呢？
||: 左侧返回假值的时候，才回去去执行右侧的操作，⚠️注意，是假值。
假值：false、undefined、null、0、-0、NaN、””、’’这些都是假值。
真值：除了最常见的正常值外，{}和[]也属于真值。
归纳总结
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const test1 = undefined;
const value1 = test1 ?? "ok"; // ok
const test2 = null;
const value2 = test2 ?? "ok"; // ok
const test3 = 0;
const value3 = test3 ?? "ok"; // 0
const test4 = false;
const value4 = test4 ?? "ok"; // false
const test5 = "";
const value5 = test5 ?? "ok"; // ""
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| const test1 = undefined;
const value1 = test1 || "ok"; // ok
const test2 = null;
const value2 = test2 || "ok"; // ok
const test3 = 0;
const value3 = test3 || "ok"; // ok
const test4 = false;
const value4 = test4 || "ok"; // ok
const test5 = "";
const value5 = test5 || "ok"; // ok
|
可选链式操作符?.
允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效,如果引用为null或者undefined他会返回undefined，而不会引起报错。
这个就更香了，以前我们经常会去判断某个对象里是否存在某个属性，然后再去做相应的逻辑判断，安全的写法是这样的。
1
2
3
4
5
| if (res && res.name) {
// do somethig
}
or
const name = res && res.name;
|
现在直接可以这样了
1
2
3
4
5
| if (res?.name) {
// do somethig
}
or
const name = res?.name;
|
他们2句含义是相等的，并且链式操作符可以继续链下去，简化了很多。
我的微信公众号： 梨的前端小屋
