欢迎光临
技术人生-雨巷前端

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

未经允许不得转载:技术人生 » ES新提案:可选链(?.)和双问号(??)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

我是前端,我不迷茫