?.和??估计是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。而结合?.和??使用最常见的例子就是，通过?.来获取嵌套在对象内部的值，并且通过在最后放一个??来给出一个表达式的默认值。

有关浏览器兼容性的问题，可以参考 caniuse.com/mdn-javascr… 和 caniuse.com/mdn-javascr…