美文网首页
ES2020 新特性

ES2020 新特性

作者: 杨晨1994 | 来源:发表于2020-09-15 16:47 被阅读0次

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

相关文章

  • ES2020 新特性

    ES2020已经落地了,其中几个新特性实用性还是不错的,这就意味着,现在对 ES2020 中 Javascript...

  • ES2020新特性?? ?.

    专心搞前端的第9天 今天遇到一题让我一脸懵逼的面试题。 完全看不懂怎么办,怎么那么多奇怪的???网上搜了好久都没找...

  • ES2020新特性

    可选链操作符(Optional Chaining) 作用:让我们在查询具有多个层级对象时,不再需要进行冗余的各种前...

  • es2020新特性

    文章来源:方凳雅集 前言自从ES6发布之后,TC39这个负责开发ECMAScript标准的机构每年都会发布新特性。...

  • ES2020新特性

    可选链 (Optional chaining) 可选链 让我们在查询具有多层级的对象时,不需要再进行冗余的各种前置...

  • es2020新特性

    ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样包含大...

  • ES2020新特性

    https://kangax.github.io/compat-table/es6/ 查询各个浏览器对ES的支持:...

  • ES2020新特性

    前言 ES2020 是 ECMAScript 对应 2020 年的版本。这个版本不像 ES6 (ES2015)那样...

  • ES2020新特性

    Promise.allSettled优势: 在并发任务重,任务异常或者正常,都会返回对应的状态(fulfilled...

  • ES2020新特性

    https://github.com/tc39/ecma262/commit/248851026c4690c8dc...

网友评论

      本文标题:ES2020 新特性

      本文链接:https://www.haomeiwen.com/subject/bbjnsktx.html