怎么才能有自己的网站/手机优化软件

在上个月（2020.6），es11的特性已经确定了，具体的提案戳这 stage4提案

下面来简单看看es11新增了什么特性吧

1.BigInt

我们知道，js 能表示的安全整数范围是-(2^53-1)至 2^53-1，这是由 js 存储数字的方式决定的，我们可以用Number.isSafeInteger()来判断某个数是否在这个范围内，上下边界可以用Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER得到。

es11为了解决大数问题，推出了新的数据类型BigInt。这种数据类型可以进行大整数运算，但是注意，BigInt和普通的Number类型不能进行运算。

可以用BigInt的构造函数或者在数字后面加一个后缀n来得到BigInt。

let a = BigInt(123);
let b = 1212n;

let a = Number.MAX_SAFE_INTEGER;
console.log(a + 1 === a + 2); //true
let b = 9007199254740992n;
let c = b + 1n;
b === c; //false
typeof b; //bigint

如果BigInt和普通的Number数据进行运算会报错

let d = 1n;
d + 1;//Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

2.String.prototype.matchAll

字符串实例的matchAll方法接收正则或者字符串，会返回一个迭代器，迭代器的每次执行，都会返回一匹配项以及相应的匹配信息。我们可以遍历迭代器，去拿到所有的结果

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

3.globalThis

因为js有不同的运行环境，不同的运行环境有不同的全局对象，比如在node里面是global，在浏览器是window或者self，为了统一获取全局对象的方式，就有了globalThis。globalThis指向的对象和各环境的全局对象是一样的，只是规范获取方式。

globalThis//window(浏览器环境)

4.dynamic-import

这个特性在webpack和ts中都支持了，即动态加载，或者说按需加载。

Import（src）返回的是一个promise对象，所以可以用await或者注册回调来处理

async function fn() {const a = await import("./7-1.js");import("./7-1.js").then((module) => {//});
}

另一个需要注意的点是，之前的import只能写在顶层作用域，不能写在函数内部，现在的动态import可以写在非顶层作用域内。 

5.空值合并运算符

这个特性在ts的 3.7版本已经推出半年了，用过ts的应该不陌生，空值合并运算符(??)和之前的或(||)操作符有点像。不同的是，或是在左边的表达式为假值(false,0,"",NaN,null,undefined)时，取右边的值，而空值合并运算符，是在左边的表达式为空值（null,undifined）时取右边的值。

看个例子：

const a = 0;
const b = false;
const c = null;
const d = undefined;
console.log(a || b); //false
console.log(a ?? c); //0
console.log(c ?? d); //undefined

6.可选链

这个特性也是早在ts 的3.7版本就已经推出的，和空值合并运算符经常一起使用。

我们在用对象点出属性或者方法的时候，如果嵌套的话，可能会出现中间某个对象是undifined，导致代码报错。为了代码的健壮性，我们经常用&&来规避，比如这样：

a && a.b && a.b();

有了空值合并运算符，就不需要冗余的&&了。

a?.b?.()

数组可以看成特殊的对象，取数组成员时也用?.

b?.[1]?.ccc//b数组的可能的第2个成员的可能的ccc属性

空值合并运算符结合可选链，我们可以很方便的给一个变量赋值，以及如果赋值失败赋值上默认值

const a = b?.c?.d ?? "";

7.Promise.allSettled

我们知道，Promise.all的作用是等全部的promise示例都resolve之后，触发对应的回调，。这就有个问题，如果有个promise失败，即reject了，那么Promise.all的状态是失败的，即不会触发作为回调函数的第一个参数。为了补充这个场景，Promise.allSettled就来了。

Promise.allSettled也是接收一个Promise数组作为参数，等所有的参数状态都完成的时候（不管是成功还是失败），回调就会触发。回调函数的参数是一个数组，数组的每个元素有两个属性，一个是status，值为'rejected'或者'fullfilled'，对应表示这个promise是成功还是失败，另一个属性是reason，表示promise的回调参数。

const a1 = Promise.resolve(1);
const a2 = Promise.resolve(2);
const a3 = Promise.reject(3);
const a4 = Promise.reject();
Promise.allSettled([a1, a2, a3, a4]).then((a) => {console.log(a);
});
// [
//   { "status": "fulfilled", "value": 1 },
//   { "status": "fulfilled", "value": 2 },
//   { "status": "rejected", "reason": 3 },
//   { "status": "rejected", "reason": undefined}
// ]

8.聚合导出

关于import，我们可以这样导入所有成员：

import * as MyModule from '...'

这次加了个配套的

export * as MyModule from '...'

这个导出语句和下面的语句的作用是一样的

import * as MyModule from '...'
export {MyModule}

以上就是ES11的新特性，可以看得出来，比之前的ES10这些斑斑改动量还是更大的，也方便了一些js代码的书写。