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