Javascript 中经常被忽视的两个神奇运算符 - ?，和??

?. 和 ?? 可能是 Javascript 中两个最有用且经常被忽视的运算符。这两个操作员最大的作用就是响应undefined和null。在没有lodash这样的库的情况下，直接使用Javascript自身的机制可以大大提高程序的健壮性。

?.主要用于在多层对象/数组中的函数调用中获取值，而??与||类似，但专门作用于undefined和❀。

下面我们用一些例子来说明?.和??，并与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"`
`_.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。组合 ?. 和 ?? 的最常见示例是使用 ?. 获取嵌套在对象中的值，并通过在末尾附加 ?? 来给出表达式的默认值。

Javascript 中经常被忽视的两个神奇运算符 - ?，和??

版权声明

作者文章