Javascript中经常被忽略的两个神奇操作符—— ?. 和 ??

?.??估计是Javascript两个最为有用并且最经常被忽略的操作符了。这两个操作符最大的作用,就是对于undefinednull的应对,在没有lodash等库的情况下,直接桶过Javascript自身的机制就可以很大的程度上提高程序的健壮性。

?.主要用于在多层的object/array进行取值和函数调用,而??则比较类似于||,但是专门作用于undefinednull

下面我们会通过一些例子来说明?.??,并且和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

在使用??操作符的时候,需要注意的正是根据??的定义,注意到它只能作用于undefinednull。而结合?.??使用最常见的例子就是,通过?.来获取嵌套在对象内部的值,并且通过在最后放一个??来给出一个表达式的默认值。

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14790.html

发表评论

登录后才能评论