ECMAScript2020前瞻

206 阅读3分钟

本文会讲解以下ES2020新特性,只是简单讲解用法不会剖析底层原理

  1. Promise.allSettled
  2. String.prototype.matchAll
  3. globalThis
  4. 运算符
    4.1 可选链式调用
    4.2 空值运算
  5. class
    5.1 静态字段
    5.2 私有变量
  6. 语法规则

1.Promise.allSettled与Promise.all

在之前版本中,使用Promise来解决异步的问题再好不过了。但是使用Promise.all有一个副作用,如果传入的其中一个对象失效,会导致其他对象一同失效。

const p1 = new Promise((succ, err) => {
  setTimeout(() => {
    succ();
  }, 1000);
});

const p2 = new Promise((succ, err) => {
  setTimeout(() => {
    err();
  }, 500);
});
Promise.all([p1, p2])
  .then(function () {
    console.log(arguments)
  })

这是Promise.all的写法,显而易见这么写会报错,但是也有解决方法,不会的自行百度这里就不赘述了。

使用新特性-Promise.allSettled
Promise.allSettled([p1, p2])
  .then(function () {
    console.log(arguments)
  })

可以看到有一个rejected,但并不会影响程序的执行
支持情况

2.String.prototype.matchAll与String.prototype.match

match方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

const str = 'hello world'

const reg = /l/

let res = str.match(reg)

console.log(res)

如果修改匹配规则进行全局匹配的话,返回的信息就比较简单了

matchAll用法

由于其返回的是RegExpStringIterator对象,我们用for of处理下可以看到打印出了所有“l”的详细信息 支持情况

globalThis

在web中,globalThis = window,在nodejs中,globalThis = global,对于globalThis没什么好说的,奉上连接MDN-globalThis
支持情况

运算符

可选链式调用
  const obj = {}
  obj.a // => undefined
  obj.a.b // => Cannot read property 'b' of undefined

使用可选链式调用后

  const obj = {}
  obj.a // => undefined
  obj.a?.b // => 不会报错  如果前方数据为undefined或null 会终止程序的执行 

**⚠️ 慎重使用,不利于我们查找错误 **
支持情况

空值运算

假设有这么一个场景,我写了一个function,带有一个默认参数,如果传参,则返回参数,如果无参,则返回默认值

function foo(a) {
  return a || 'hello world'
}
foo(123)	  // => 123
foo(0)		 // => 'hello world'
foo("")		 // => 'hello world'
foo(false)  // => 'hello world'

但是这么写会有个弊端,如果我们输入一些数字或字符串会正常返回,但是传入了像0、false、""这样的这个function就不太聪明了

使用空值运算来改写一下这个function

function foo(a) {
  return a ?? 'hello world'
}

尝试下上面的情况 注意⚠️,空值运算不支持undefined、null
支持情况

class

静态字段

静态字段这个我感觉没啥好说的MDN-Static

私有变量

在变量或函数前面添加一个符号#,可以将它们设为私有属性,只在类内部可用

class Foo {
  #num = 857
  init() {
    console.log(this.#num);
  }
}
new Foo().init() // => 857

let Poo = new Foo()
Poo.#num // => Uncaught SyntaxError: Private field '#num' must be declared in an enclosing class

6.语法规则

动态引入
import xxx from 'xx' 
xxx.yyy  // 之前的写法

import(xxx).then(function () {

})  // 全新的写法

// 举个栗子🌰
let sss = await import (xxx);
抛异常 (非常遗憾现在市面上的浏览器还不支持这种语法,看看就得了)
let foo = (options = throw TypeError()) => {

}
tyr catch
try {
  
} catch () { // ES2020支持catch不写参数,但是不建议使用,因为会忽略掉错误信息
  
}