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