可选链操作符(Optional Chaining)
作用:让我们在查询具有多个层级对象时,不再需要进行冗余的各种前置校验
例子
新特性前
let nestedProp = obj && obj.first && obj.first.second;
使用新特性后
let nestedProp = obj?.first?.second;
空位合并操作符
作用:用??表示,如果表达式在??的左侧运算符求值为undefined或null,就返回其右侧默认值
例子
let c = a ?? b;
// 等价于 let c = a !== undefined && a !== null ? a : b;
Promise.allSettled
作用:并发执行异步任务,并且多个任务之间互不干扰,与promise.all相比,promise.all有个缺点就是,只要其中有一个异步操作失败,其他异步操作就会停止,而promise.allSettled不会。
例子
promise.all
const promise = [
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3),
Promise.reject('error'),
]
Promise.all(promise)
.then(responses => console.log(responses))
.catch(e => console.log(e)) // "error"
Promise.allSettled
Promise.allSettled([
Promise.reject({ code: 500, msg: '服务异常'}),
Promise.resolve({ code: 200, list: [] }),
Promise.resolve({ code:200, list: []})
]).then(res => {
/*
0: {status: "rejected", reason: {...}}
1: {status: "fulfilled}, value:{...}}
2: {status: "fulfilled", value: {...}}
*/
// 过滤rejected状态,尽可能多的保证页面区域数据渲染
RenderContent(
res.filter(el => {
return el.status != 'rejected'
}
)
})
String.prototype.matchAll
作用:一次性取出所有符合的匹配项
例子
function collectGroup1 (regExp, str) {
let results = []
for (const match of str.matchAll(regExp) {
results.push(match[1])
}
return results;
}
console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
// ["foo", "bar", "baz"]
Dynamic import
作用: 返回一个解析为模块对象的promise,动态引用需要的内容
el.onclick = () => {
import('/modules/my-module.js')
.then(module => {
// Do something with the module
}
.catch(err => {
// load error;
}
}
BigInt
作用:就是让js能够表示-(2^53-1)至 2^53-1范围之外的数。
用法:使用BigInt创建或者直接在数字后面加上n
例子
const Num = 111;
const aBigInt = BigInt(aNumber);
aBigInt === 111n // true
globalThis
作用:让开发者在Web Workers、node.js、浏览器中统一获取全局对象,不用像以前那样,需要self、window、global进行区分。
例子
globalThis.v = {value:true};