ES2020来了

ES2020发布了新特性 https://github.com/tc39/proposals

新功能概览

  1. 可选链运算符 - Optional Chaining
  2. 空值合并运算符 - Nullish coalescing Operator
  3. 标准化的全局对象 - globalThis
  4. Promise.allSettled
  5. String.prototype.matchAll
  6. BigInt
  7. for-in mechanics
  8. 异步加载模块 - import()

详细介绍

1. 可选链运算法

我们有时候为了访问深层嵌套的属性，一不小心就会报undefined的错，需要写一个很长的&&链去检查每个属性是否存在，代码如下

  let name = result && result.data && result.data.info && result.data.info.name;

如果不这么做，很可能会报程序异常 Uncaught TypeError: Cannot read property 'xxx' of undefined,为了简化上述的代码，ES2020新增了可选链运算符，就是在需要判断是否存在的属性后面加上?，代码如下：

let name = result?.data?.info?.name;

可选运算符也可以作用到方法上，如下

let name = getUserInfo?.().data?.info?.name;

2.空值合并运算法 - Nullish coalescing Operator

获取对象的属性的时候，我们经常需要为null/undefined的属性设置默认值。现在我们都是使用||运算符来处理，例如：

let userInfo = {};
let name = userInfo.name || 'Lucky';

但是，这么做会导致 false 、0 , ' '等属性值被覆盖掉，导致运算结果不准确，为了避免这种情况，ES2020新增了 空值合并运算符 ??，代码如下：

const result = {
  data: {
    nullValue: null,
    numberValue: 0,
    textValue: '',
    booleanValue: false
  }
};
const undefinedValue = result.data.undefinedValue ?? 'default value';
// 'default value'
const nullValue = result.data.nullValue ?? 'default value';
// 'default value'
const numberValue = result.data.numberValue ?? 200;
// 0
const textValue = result.data.textValue ?? 'default value';
// ''
const booleanValue = result.data.booleanValue ??  true;
// false

3. 标准化的全局对象-globalThis

Javascript在不同的环境中获取全局对象的方式不同：
node: 通过 global;
浏览器：通过window、self等，甚至通过this，但是this的指向比较复杂，依赖当前的执行上下文;

过去获取全局对象，可通过下面的函数：

const getGlobal = () => {
  if (typeof self !== 'undefined') return self;
  if (typeof window !== 'undefined') return window;
  if (typeof global !== 'undefined') return global;
  throw new Error('unable to locate global object');
}
const globals = getGlobal(); 

if (typeof globals.setTimeout !== 'function') { 
  // 此环境中没有 setTimeout 方法！
}

ES2020提供的globalThis，目的就是提供一种标准化方式访问全局对象。上述的方法就可以直接改成

if (typeof globalThis.setTimeout !== 'function') {
  //  此环境中没有 setTimeout 方法！
}

4.Promise.allSettled

Promise.all可以并发执行多个任务，但是Promise.all有个缺陷，那就是只要其中有一个任务出现异常了，就会直接进入catch的流程，所有任务都会挂掉，这不是我们想要的。

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 'ok'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'bad'));
const promises = [promise1, promise2];

Promise.all(promises)
  .then(result => {
    // 不会触发
   })
  .catch((err) => {
    console.log(err); // bad
  })
  .finally(() => {
    // 会触发，获取不到我们想要的内容
  })

这时候需要一个方法来保证如果一个任务失败了，其他任务还会继续执行，这样才能最大限度的保障业务的可用性。
ES2020提供的Promise.allSettled可以解决这个问题，Promise.allSettled会返回一个promise,这个返回的promise会在所有输入的promise resolve或reject之后触发。看代码：

const promise1 = new Promise((resolve) => setTimeout(resolve, 200, 'ok'));
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'bad'));
const promises = [promise1, promise2];

Promise.allSettled(promises)
  .then((results) => results.forEach((result) => console.log(result)));

// output:
// {status: "fulfilled", value: "ok"}
// {status: "rejected", reason: "bad"}

5. String.prototype.matchAll

我们先来看一下 String.prototype.match

const str = '<p>JS</p><p>正则表达式</p>';
const reg = /<\w+>(.*?)<\/\w+>/g;
console.log(str.match(reg));

// output: ['<p>JS</p>', '<p>正则表达式</p>']

可以看出返回的数组里包含了父匹配项，但未匹配到子项('JS'、'正则表达式')。
移除全局搜索符g试试

const str = '<p>JS</p><p>正则表达式</p>';
const reg = /<\w+>(.*?)<\/\w+>/; // 这里把 g 去掉了
console.log(str.match(reg));

// output: 
/*
["<p>JS</p>", "JS", index: 0, input: "<p>JS</p><p>正则表达式</p>", groups: undefined]
*/

这样可以获取到匹配的父项，包括子项，但只能获取到一个满足的匹配字符。

如何获取到全局所有匹配项，包括子项呢？
ES2020提供了一种简易的方式：String.prototype.matchAll,该方法会返回一个迭代器。

const str = '<p>JS</p><p>正则表达式</p>';
const reg = /<\w+>(.*?)<\/\w+>/g; // 这里是带 g 的
const allMatches = str.matchAll(reg);

for (let item of allMatches) {
    console.log(item);
}

/*
output:
第一次迭代：
[
  "<p>JS</p>",
  "JS",
  index: 0,
  input: "<p>JS</p><p>正则表达式</p>",
  groups: undefined
]
第二次迭代：
[
  "<p>正则表达式</p>",
  "正则表达式",
  index: 9,
  input: "<p>JS</p><p>正则表达式</p>",
  groups: undefined
]
*/

能看到每次迭代中可获取所有的匹配，以及本次陪陪的成功的一些其他的信息。

6. BigInt

JS中Number类型只能安全的表示-(2^53-1)至2^53-1范围的值，即Number.MIN_SAFF_INTERGER 至 Number.MAX_SAFF_INTERGER,超出这个范围的整数计算或者表示会丢失精度。
比如，我们在开发过程中，有时候订单id会特别长，返回到浏览器就会失去精度，只能用字符串来传。

image.png

ES2020提供了一个新的数据类型：BigInt。使用BigInt有两种方式：

  1. 在整数字面量后面加n 
let bigIntNum = 9007199254740993n;
  1. 使用BigInt函数
let bigIntNum = BigInt(9007199254740993);

通过BigInt，我们就可以安全的进行大数整型计算了。

let big = 9007199254740994n + 9007199254740994n; // 结果为 18014398509481988n

注意：
BigInt 跟 number 不严格相等

0n === 0    //false
0n == 0    // true

BigInt不能跟number 一起运算

1n + 2 
// VM8334:1 Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions...

不能使用+把BigInt转化成number

+1n
// TypeError: Cannot convert a BigInt value to a number
Number(1n)
// 1

7. for-in mechanics

之前在不同的引擎下for int循环出来的内容顺序可能是不一样的，现在标准化了。

8. 异步加载模块 - import()

有时候我们需要动态加载一些模块，这时候就可以使用ES2020提供的import()了

// utils.js
export default {
  test: function () {
    console.log('test')
  }
}

// index.js
import('./utils.js')
  .then((module) => {
    module.default.test();
  })

后记

项目中使用ES2020,只需要在babel配置文件中添加

{
  "presets":  ["es2020"]
}

参考资料

https://github.com/tc39/proposals/blob/master/finished-proposals.md
https://zhuanlan.zhihu.com/p/100251213

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 210,978评论 6赞 490
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 89,954评论 2赞 384
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 156,623评论 0赞 345
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,324评论 1赞 282
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,390评论 5赞 384
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,741评论 1赞 289
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,892评论 3赞 405
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,655评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,104评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,451评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,569评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,254评论 4赞 328
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,834评论 3赞 312
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,725评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,950评论 1赞 264
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,260评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,446评论 2赞 348