ES2020 新特性

ES2020已经落地了，其中几个新特性实用性还是不错的，这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变

一、BigInt

之前，Javascript 中最大的整数是 pow(2, 53) - 1。但是，BigInt 不受此限制。数字后面添加一个 n。这个 n 说明这是一个 BigInt，Javascript 引擎就会特殊处理（不管是 V8，还是其它引擎）
注: 传统的数字系统是 IEEE754
注: 不能混用 BigInt 和 number 类型

let num1 = Number.MAX_SAFE_INTEGER;
console.log(num1) //9007199254740991
console.log(++num1) //9007199254740992
console.log(++num1) //9007199254740992
let num2 = 9007199254740991n;
console.log(++num2) //9007199254740992n
console.log(++num2) //9007199254740993n
console.log(num2 + 10) //Cannot mix BigInt and other types, use explicit conversions 无法混合BigInt和其他类型，请使用显式转换

二、空值合并 ??

空值合并可以真正的检查 nullish 值，而不是 falsely 值。你或许会问：nullish 和 falsely 之间有什么不同呢？在 Javascript 中有很多值都是 falsely。比如：空字符串、数字 0、undefined 、null、 false 、NaN 等。
然而，很多情况下你只想检测一个变量是否为空值 -- undefined 或者 null，就像变量可以是一个空字符串甚至是一个假值。想一下 我们在做if判断时 或者其他隐式转换时候 可能会遇到值不存在时怎么样,但是值为0 也会判定为falsely

// 隐式转换规则
// 两个都不是 返回第二个
// 第一个不是 第二个是返回第二个
// 两个都是 返回第一个
// 第一个是 第二个不是返回第一个
console.log(0 || 'a') // a
console.log(false || 'a') // a
console.log('' || 'a') // a
console.log(NaN || 'a') // a
console.log(null || 'a') // a
console.log(undefined || 'a') // a
console.log(0 ?? 'a') // a
console.log(false ?? 'a') // false
console.log('' ?? 'a') // ''
console.log(NaN ?? 'a') // NaN
console.log(null ?? 'a') // a
console.log(undefined ?? 'a') // a

三、可选链 ?

我们经常在开发中遇到多层级的对象,有的时候找其中一个属性找不到就会报错,可选链语法允许你访问嵌套更深的对象属性，而不用担心属性是否存在。如果，存在很好。反之，会返回 undefined。它不仅仅可操作对象属性，也可以操作函数的调用或者数组

const props = {
        a:{
          b:100
        }
      }
console.log(props.a.b) //100
console.log(props.a?.c?.b)// undefined
console.log(props.a.c.b) // Cannot read property 'b' of undefined

四、Promise.allSettled

Promise.all相信大家都很熟悉了,所有Promise返回resolved就会执行,但是我们有时候业务逻辑不一样,需要全部执行完返回不管是什么结果 这个时候就可以用到Promise.allSettled
Promise.allSettled 方法接收一组 Promise，并且会返回所有的结果 - 而不管是 resolved 还是 rejected。

const myPromise = [
   Promise.reject(),
   Promise.resolve()
]
Promise.all(myPromise).then(() => {
   console.log('All Promise Resolve') // 不会执行
})
Promise.allSettled(myPromise).then(() => {
   console.log('All Promise Settled') // 会执行
})

五、String#matchAll

matchAll 是 String 原型链上的一个新增的方法，它可以关联正则表达式。它返回一个迭代器，一个接一个的返回所有匹配的组

var str="abc"; 
var n=str.match(/[a-c]/g);
console.log(n) //[a,b,c]
var m=str.matchAll(/[a-c]/g);
console.log(m) //RegExpStringIterator {}
Array.from(m,item => {
  console.log(item)
})
//["a", index: 0, input: "abc", groups: undefined]
//["b", index: 1, input: "abc", groups: undefined]
//["c", index: 2, input: "abc", groups: undefined]

六、globalThis

如果，你写过那些可以运行在 Node、浏览器或者 web-workers 等跨平台的 JS 代码，你就会花费很多的时间去处理全局对象的问题。
这是因为不同平台全局对象也不同，浏览器中是 window，Node 中是 global，web workers 中是 self。如果，还有更多的运行环境，这个对象也会有不同。
因此，你自己必要检查运行环境来决定使用正确是全局对象。
ES2020 给我们带来了 globalThis 对象，它始终会引用着全局对象，而不用关系代码在哪运行：

console.log(globalThis === window) // true