本文会讲解以下ES2020新特性,只是简单讲解用法不会剖析底层原理
- Promise.allSettled
- String.prototype.matchAll
- globalThis
- 运算符
4.1 可选链式调用
4.2 空值运算 - class
5.1 静态字段
5.2 私有变量 - 语法规则
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不写参数,但是不建议使用,因为会忽略掉错误信息
}