?.和??估计是Javascript两个最为有用并且最经常被忽略的操作符了。这两个操作符最大的作用，就是对于undefined和null的应对，在没有lodash等库的情况下，直接桶过Javascript自身的机制就可以很大的程度上提高程序的健壮性。
?.主要用于在多层的object/array进行取值和函数调用，而??则比较类似于||，但是专门作用于undefined和null。
下面我们会通过一些例子来说明?.和??，并且和lodash的一些用法做一些比较。首先准备一个测试数据：
const data = {
layer1: {
layer2: [
{
layer4: "layer 4 value",
func: function(x) {
return `in layer 4 func ${x}`;
}
},
"layer 3 value"
]
},
x: "layer 1 value"
};
首先比较一下?.和lodash：
?. |
lodash | 结果 |
|---|---|---|
data?.x |
_.get(data, "x") |
"layer 1 value" |
data?.layer1?.layer2?.[1] |
_.get(data, "layer1.layer2[1]") |
"layer 3 value" |
data?.layer1?.layer2?.[0]?.layer4 |
_.get(data, "layer1.layer2[0].layer4") |
"layer 4 value" |
data?.layer1?.layer2?.[2] |
_.get(data, "layer1.layer2[2]") |
undefined |
data?.layer1?.layer2?.[0]?.func(0) |
_.get(data, "layer1.layer2[0].func")(0) |
"in layer 4 func 0" |
data?.layer1?.layer2?.[0]?.func_not_existed?.(0) |
_.get(data, "layer1.layer2[0].func_not_existed", () => undefined)(0) |
undefined |
然后比较一下??和一些相关的操作符：
使用??操作符 |
使用其他操作符 |
|---|---|
undefined??true // true |
undefined || true // true |
undefined??false // false |
undefined || false // false |
null??false // false |
null || false // false |
null??true // true |
null || false // false |
false??true // false |
false || true // true |
false??'' // false |
false || "" // "" |
""??true // "" |
"" || true // true |
""??false // "" |
"" || false // false |
""??null // "" |
"" || null // null |
在使用??操作符的时候，需要注意的正是根据??的定义，注意到它只能作用于undefined和null。而结合?.和??使用最常见的例子就是，通过?.来获取嵌套在对象内部的值，并且通过在最后放一个??来给出一个表达式的默认值。
