EcmaScript 2020 新特性总结

1. 可选操作符 “ ?. ” 

这个操作符用来获取后端对象可能的不存在的属性值的时候十分有用

日常开发中，当需要访问嵌套在对象内部好几层的属性时使用

 

let nestedProp = obj && obj.first && obj.first.second;

 

?. 获取的时候  obj?.first?.second

 

 

2. 空值合并操作符 “ ??  ”

let user = {

　　name: 'qq',

　　age: 0

}

取值 user.age || 12  这个时候 0 会当作false而取值12   ;  本来是想取值0 或者不存在的时候取值12

现在  ?? 运算符可以达到我们的目的 

user.age ?? 17  返回0

 

3. Promise.allSettled

使用方法

Promise.allSettled([

　　Promise.reject({ code: 500, msg: '服务异常' }),

　　Promise.resolve({ code: 200, list: [] }),

　　Promise.resolve({ code: 200, list: [] }) ])

      .then(res => {

　　　　console.log(res)

　　/* 0: {status: "rejected", reason: {…}}

　　1: {status: "fulfilled", value: {…}}

　　2: {status: "fulfilled", value: {…}} */

// 过滤掉 rejected 状态，尽可能多的保证页面区域数据渲染

　　RenderContent( res.filter(el => {

　　return el.status !== 'rejected' })

) })

 

Promise.allSettled跟Promise.all类似, 其参数接受一个Promise的数组, 返回一个新的Promise, 唯一的不同在于, 它不会进行短路, 也就是说当Promise全部处理完成后,我们可以拿到每个Promise的状态, 而不管是否处理成功。

 4. matchAll 

match方法  string.match(reg) 返回的是匹配的第一个元素  matchAll返回所有匹配到的结果，但是需要正则表达式是g修饰

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"]

 

 5. 动态导入 import then 

示例① let module = await import('/modules/my-module.js');

示例② el.onclick = () => {

　　        import('/modules/my-module.js')

　　       .then(module => { // Do something with the module. })

　　        .catch(err => { // load error; }) }

 

 

6. bigInt

解决了： 1 大数运算 丢失精度

创建 BigInt 类型的值也非常简单，只需要在数字后面加上 n 即可。例如，123 变为 123n。也可以使用全局方法 BigInt(value) 转化，入参 value 为数字或数字字符串。

1. 声明 ，在大数后面加n就能声明一个数是大数，或者 使用BigInt（） 函数包裹一个数字

在数字末尾加上n就能计算精确的大数了

let in3 = BigInt(98787880)
let in2 = BigInt(123212321)

in2*in3  // 12171883981469480n

另外： 1234567890123456789n * 123n;
// -> 151851850485185185047n

7. globalThis 统一了node环境和浏览器环境里面的this，
 浏览器中全局作用域中代表对象window, node里面这个对象是global