ES6新特性-可选链和空值合并

1.可选链

1.1 背景

当我们要读取一个嵌套对象中间的方法时，比如说下面的例子：

     const a = {
        b: {
          c: {
            d() {
              return "hello";
            },
          },
        },
      };

我们可以去直接调用，如下所示：

console.log(a.b.c.d());

但是这种方法的在实际项目中存在非常大的隐患，就比如如果中间的数据出现异常，代码会报错，阻塞后面代码执行，通常我们可以使用短路与(&&)，当中间数据出现异常并不会报错，返回undefined，不会阻塞后面代码的执行，如下所示：

console.log(a && a.b && a.b.c && a.b.c.d && a.b.c.d());

这种方法可以避免在读取对象属性或执行方法的时候报错，但可读性和美观性比较差，因此在ES6推出了可选链运算符(?.)

1.2 可选链运算符 (?.)

还是上面的例子，可以改为用可选链的写法来读取嵌套对象中的方法，不仅可以减少我们代码的数量，也比较美观，如下所示：

console.log(a?.b?.c?.d?.()); // 等价于 console.log(a && a.b && a.b.c && a.b.c.d && a.b.c.d());

1.3 可选链写法的优缺点

优点：可选链写法它是一个安全操作，可以放心使用。

缺点：当我们使用了可选链写法，但结果返回的是undefined时，我们并不能准确找到错误的来源，它是一个会隐藏错误的操作，如果需要显示的暴露错误，不建议使用。

2.空值合并

2.1 背景

在项目中我经常会使用短路与( || )来判断一个数据的真假，如果为假就取后面的默认值，但这种方法有个缺陷，就是当前面的数据为0或者空值时，会隐式转换为false，从而会取到后面的默认值，但是0和空值都是合法有效的数据，它们会被当成假值，如下所示：

      console.log(0 || "默认值"); // "默认值"
      console.log("" || "默认值"); // "默认值"
      console.log(null || "默认值"); // 默认值
      console.log(undefined || "默认值"); // 默认值

不仅仅是0和空值，只要是隐式转换为假值的都会取到后面的默认值，但有时候我们并不希望0和空值为假值，当数据为undefined和null时才为假值时，显然无法去使用电路与，为了专门处理null和undefined的异常场景，在ES6推出了空值合并(??)，它的用法与短路与一样，如下所示:

        console.log(0 ?? "默认值"); // 0
        console.log('' ?? "默认值"); // ''
        console.log(null ?? "默认值"); // 默认值
        console.log(undefined ?? "默认值"); // 默认值

可以看到0和空值并没有被当成假值，而是一个合法有效的数据。

2.2 空值合并的优缺点

优点：

1.精确性：只针对null和undefined进行默认值替换，不会将其他假值视为需要替换的情况。

2.避免隐式类型转换：使得空值处理更加准确和可靠。

缺点：

1.适用场景有限：仅限于处理null和undefined的场景，对于其他假值的处理需要使用其他的方法。

小结

        在JavaScript开发中，处理嵌套对象和空值（如null和undefined）是常见的任务，也是容易出错的地方。为了更有效地处理这些情况，ES6及后续版本引入了可选链（Optional Chaining）和空值合并（Nullish Coalescing）运算符，这两个特性显著提高了代码的简洁性、安全性和可读性。