ES新提案：可选链(?.)和双问号(??)

前言

ES全称为ECMAScript，是JavasSript的一种语言标准。ECMAScript发布新语法规范需向TC39委员会提案，任何人都可以向其会提案。TC39由包括许多浏览器厂商在内的各方组成，提案需要经历五个阶段，每个阶段的变动都需要由TC39委员会批准(传送门：TC39)，如下：

• Stage 0: strawman——最初想法的提交。
• Stage 1: proposal（提案）——由TC39至少一名成员倡导的正式提案文件，该文件包括API事例。
• Stage 2: draft（草案）——功能规范的初始版本，该版本包含功能规范的两个实验实现。
• Stage 3: candidate（候选）——提案规范通过审查并从厂商那里收集反馈
• Stage 4: finished（完成）——提案准备加入ECMAScript，但是到浏览器或者Nodejs中可能需要更长的时间。

本文说的可选链(?.)和双问号(??)现在已经是Stage 4阶段，妥妥的等年中发版。

可选链

使用场景

1、长判断时用：在开发中，对接口返回的嵌套对象数据进行属性判断。

let res = {
  code: 200,
  data: {
    content: [1,2,3], //table list
    page: 1
  },
  message: 'success',
  func: function(){console.log('I am func')}
}
const tableList = res.data && res.data.content; //[1,2,3]
// 相当于
const tableList = res.data ? res.data.content : undefined;
// 有了可选链, 简写为
const tableList = res.data?.content  //[1,2,3]

// 甚至更谨慎点，加长判断，多个三目运算
const tableList = res && res.data && res.data.content; 
// 有了可选链, 简写为
const tableList = res?.data?.content  //[1,2,3]

2、调用函数或方法时用：调用前先判断是否是存在

// 引用上文例子
const tableList = res && res.func && res.func(); 
// 有了可选链，简写为
const func = res?.func?.() // I am func 或者 res.func?.()
const func = res?.test?.() // undefined

3、动态属性：属性为变量时用

const name = 'data';
res?.[name]?.content  // [1,2,3]

双问号

使用场景: 取默认值

实际上接口返回的数据中，content很可能为null 或者 undefined，或压根没返回content，因此我们判断时需要加上默认值，如下

let res = {
  data: {
    content: null, // or false, or 0,
    content1: false,
    content2: 0
  }
}
// 加上默认值
const tableList = res?.data?.content || [4,5,6]  //[4,5,6]
// 但我们发现，对于||，返回false或者0，也会取后者
const tableList = res?.data?.content1 || [4,5,6]  //[4,5,6]
const tableList = res?.data?.content2 || [4,5,6]  //[4,5,6]

此时，双问号??似乎就是为了解决双选链此问题而提出的，我们只想在返回null或者undefined时才取后者

// 加上默认值
const tableList = res?.data?.content ?? [4,5,6]  //[4,5,6]
const tableList = res?.data?.content1 ?? [4,5,6]  //false
const tableList = res?.data?.content2 ?? [4,5,6]  //0

双问号??取默认值用法

undefined ?? 'default' // 'default'
null ?? 'default' // 'default'
false ?? 'default' // 'false'
0 ?? 'default' // 0