ES2020新特性

ES2020新特性

一、Promise.allSettled

Promise.all 具有并发执行异步任务的能力，但最大的问题就是只要有一个任务出现异常(reject)，所有的任务都会直接走异常reject状态，走catch回调；
Promise.allSettled 如果并发任务中，无论一个任务正常或者异常，都会返回对应的的状态（fulfilled 或者 rejected）与结果（业务value 或者 拒因 reason,在 then 里面通过 filter 来过滤出想要的业务逻辑结果，这就能最大限度的保障业务当前状态的可访问性。

Promise.allSettled([
	Promise.reject({code: 500, msg: “接口挂了"});
	Promise.resolve({code: 200, data: []});
	Promise.resolve({code: 200, data: []})
]).then((res) => {
	// res --> 返回 [{status: "reject", reson: {}},{status: "fulfilled", value: {}},{status: "fulfilled", value: {}}]
	// 获取有效数据
	let data = res.filter(el => el.states !== "reject")
})

二、可选链(optional chaining)

开发中，使用某字段的时必不可少的需要做前置校验；

let name = user && user.info && user.name;
let fun = user && user.info && user.info.doSamething();
// 使用 optional chaining  ?表示如果问号左边表达式有值, 就会继续查询问号后面的字段
let nameNew = user?.info?.name;
let funNew = user?.info?.doSamethiing?.();

三、空值合并运算符(Nullish coalescing Operator)

开发中，查询某字段不存在则会设置一个默认值

let name = (user && user.name) || "学生";
// 使用空值合并运算符 ?? 
let nameNew = `${user.name}` ?? "学生";

空值合并运算符 与 可选链 相结合，可以很轻松处理多级查询并赋予默认值问题。

let name = user?.info?.name ?? "学生"

四、dynamic-import 按需加载

前端打包资源越来越大，打包成几M的JS资源已成常态，而往往前端应用初始化时根本不需要全量加载逻辑资源，为了首屏渲染速度更快，很多时候都是按需加载。而这些按需执行逻辑资源都体现在某一个事件回调中去加载

el.onclick = () => {
	import(`/path/test.js`).then((module) => {
		module.doSomething()
	}).catch((err) => {})
}

五、globalThis

Javascript 在不同的环境获取全局对象有不通的方式，node 中通过 global, web中通过 window, self 等，有些甚至通过 this 获取，但通过 this 是及其危险的，this 在 js 中异常复杂，它严重依赖当前的执行上下文，这些无疑增加了获取全局对象的复杂性。过去获取全局对象，可通过一个全局函数

var getGlobal = function() {
	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")
}
var globals = getGlobal();

而 globalThis 目的就是提供一种标准化方式访问全局对象，有了 globalThis 后，你可以在任意上下文，任意时刻都能获取到全局对象。

六、BigInt 新的数据原始（primitive）类型

Js 中 Number类型只能安全的表示-(2^53-1)至 2^53-1 范的值，即Number.MINSAFEINTEGER 至Number.MAXSAFEINTEGER，超出这个范围的整数计算或者表示会丢失精度。
typeof 9007199254740993n; // -> ‘bigint’

七、 String.prototype.matchAll 获取到全局所有匹配项，包括子项

var str = '<text>JS</text><text>正则</text>';
var str.matchAll(/<\w+>(.*?)<\/\w+>/g);
for(const match of allMatchs){
	console.log(match);
}
/*第一次迭代返回：
[
    "<text>JS</text>",
    "JS",
    index: 0,
    input: "<text>JS</text><text>正则</text>",
    groups: undefined
]
第二次迭代返回：
[
    "<text>正则</text>",
    "正则",
    index: 15,
    input: "<text>JS</text><text>正则</text>",
    groups: undefined
]
*/

ES7 async、await 异步执行
题1：输出0，1，2，3，4
解法1：IIFE立即执行函数加形成闭包

for(var i=0;i<5;i++){
    (function (i) {
        setTimeout(function () {
            console.log(i) // 0,1,2,3,4
        }, 1000)
    })(i)
}

解法2：利用JS的基本类型中参数传递是按值传递的特征

var  output = function (i) {
    setTimeout(function () {
        console.log(i)   // 0,1,2,3,4
    }, 1000)
};
for (var i = 0; i < 5; i++) {
    output(i)
}

解法3：利用ES6的let块级作用域

for(let i=0;i<5;i++){
    setTimeout(function () {
        console.log(i)
    }, 1000)
}

题2：输出0，1，2，3，4，5 要求立即输出0，后每隔一秒输出后面的数字
解法1：利用ES6的新特性Promise

const tasks = [];
for(var i=0;i<5;i++){
    ((j) => {
        tasks.push(new Promise((resolve) => {
        setTimeout(function () {
            console.log(j)     //
            resolve() 
        }, 1000*j)  //定时器的时间逐步增加
    }))
    })(i)
}
Promise.all(tasks).then(() => {
    setTimeout(function(){
        console.log(i)
    },1000)
}).catch(() => {})

解法2：利用ES6的新特性Promise

const tasks = [];  //存放异步操作的Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(function(){
        console.log(i)   //0，1，2，3，4
        resolve()
    },1000*i)
})
//生成全部的异步操作
for(var i=0;i<5;i++){
    tasks.push(output(i))
}
//异步操作完成后，输出最后的i的值
Promise.all(tasks).then(() => {
    setTimeout(function(){
        console.log(i)  //5
    },1000)
})

解法3：利用ES7中的async、await

const sleep = (times) => new Promise((resolve) => {
    setTimeout(resolve, times)
})

(async () => {    //声明即执行的async 函数表达式
    for(var i = 0;i<5;i++){
        await sleep(1000);
        console.log(i)
	}
	await sleep(1000);
    console.log(i)
})()