JS中常被忽略的的两个操作符-?.和??
作用
?.
和??
估计是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是等价于?.的操作,?.就是从对象中取值,和函数的调用。
?. | 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
。而结合?.
和??
使用最常见的例子就是,通过?.
来获取嵌套在对象内部的值,并且通过在最后放一个??
来给出一个表达式的默认值。
兼容性
以上操作符是ES11出来的新特性。参考,已经从chrome从80已经开始支持了。但是兼容性有些问题,在IOS下表现很差,如果非要使用的话,就需要配合babel
https://babeljs.io/docs/en/babel-plugin-proposal-nullish-coalescing-operator
https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining