ES2020 All in One

ES2020 new features / ES11

ES2020 中的10个新功能

1. BigInt

BigInt是JavaScript中最令人期待的功能之一,终于来了。实际上,它允许开发人员在其JS代码中使用更大的整数表示形式进行数据处理和数据处理。

2. Dynamic import

JavaScript中的动态导入使您可以选择将JS文件作为模块自然地动态导入应用程序中。就像您当前使用Webpack和Babel进行操作一样。

3. Nullish Coalescing

空值合并增加了真正检查空值而不是假值的能力。您可能会问,空值和假值之间有什么区别?

在JavaScript中,很多值都是false,例如空字符串,数字0,未定义,null,false,NaN等。

但是,很多时候您可能想检查一个变量是否为空-即它是未定义还是为null,例如当变量可以为空字符串甚至是假值时就可以了。

4. Optional Chaining

可选的链接语法使您可以访问深度嵌套的对象属性,而不必担心该属性是否存在。如果存在,那就太好了!如果不是,将返回undefined。

5. Promise.allSettled

Promise.allSettled方法接受一个Promises数组,并且仅在所有这些Promises都已解决时才解决-解析或拒绝。

6. String#matchAll

matchAll是添加到String原型的新方法,该方法与正则表达式相关。这将返回一个迭代器,该迭代器一个接一个地返回所有匹配的组。

7. globalThis

如果您编写了一些跨平台的JS代码,这些代码可以在Node上,浏览器环境中以及在Web工作人员内部运行,那么您将很难掌握全局对象。

这是因为它是浏览器的窗口,是Node的全局窗口,是web worker的self。如果运行时更多,则全局对象也将有所不同。

8. Module Namespace Exports

在JavaScript模块中,已经可以使用以下语法:

但是,到目前为止,还没有对称的导出语法:

9. Well defined for-in order

ECMA规范未指定(x in y)应按哪个顺序运行。即使以前浏览器自己实现了一致的顺序,但ES2020中已将其正式标准化。

10. import.meta

import.meta对象是由ECMAScript实现创建的,具有空原型。

结论

我喜欢JavaScript社区不断发展和发展的一致性和速度。

看到JavaScript如何从经过十年的嘘声变成如今有史以来最强大,最灵活和通用性最强的语言之一,真是太神奇了,真是太棒了。

ES2020

globalThis


globalThis === window;
// true globalThis === global;
// true globalThis =
Object [global] {
global: [Circular],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Function]
},
queueMicrotask: [Function: queueMicrotask],
clearImmediate: [Function: clearImmediate],
setImmediate: [Function: setImmediate] {
[Symbol(nodejs.util.promisify.custom)]: [Function]
}
}
global =
Object [global] {
global: [Circular],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Function]
},
queueMicrotask: [Function: queueMicrotask],
clearImmediate: [Function: clearImmediate],
setImmediate: [Function: setImmediate] {
[Symbol(nodejs.util.promisify.custom)]: [Function]
}
}

refs

https://xie.infoq.cn/article/5887705e51a51af8b2781a8d3

https://alligator.io/js/es2020/

https://www.freecodecamp.org/news/javascript-new-features-es2020/

https://www.telerik.com/blogs/latest-features-javascript-ecmascript-2020



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


ES2020 All in One的更多相关文章

  1. ES2020的这些新功能令人期待

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/es2020-has-been-finalized- ...

  2. ES2020新特性链操作符 '?.'和'??'

    ES2020新特性,js中的可选链操作符?. 概述 回想一下,我们是如何访问可能含有空值(null或undefined)属性的嵌套对象,比如访问web api 返回结果的user详情,可以使用嵌套的三 ...

  3. ES2020链判断运算符?.和Null判断运算符??

    链判断运算符 ?.  业务场景: 1 // 假设data是个数组,如果data没有值,为undefinded,则直接复制会报错,因为没有length这个属性 2 3 const dateCount = ...

  4. ES2020 系列:可选链 "?." 为啥出现,我们能用它来干啥?

    可选链 "?." 可选链 ?. 是一种访问嵌套对象属性的安全的方式.即使中间的属性不存在,也不会出现错误. "不存在的属性"的问题 如果你才刚开始读此教程并学习 ...

  5. ES2020新特性记录

    1.可选链操作符 // oldlet ret = obj && obj.first && obj.first.second// newlet ret = obj?.fi ...

  6. es6之三个点(...)扩展运算符

    我们看一个语法,你就知道es6对我们码农多友好,毕竟世界在进步 let arr=[1,2,3,4,54,56] console.log(...arr) 结果是????? 没错 ...这个运算符就是把这 ...

  7. Promise是什么?

    一. Promise是什么? Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来. 避免了多级异步操作的回调函数嵌套. Promise最早 ...

  8. 个推TechDay参会感悟

    上周六去参加了个推和FCC联合在梦想小镇举办的TechDay,当然是作为台下听讲选手参与的,想上去讲可惜实力他不允许啊,吹牛逼我在行,讲技术可就有点虚了,老老实实的坐在台下听大佬们的分享,当然由于买了 ...

  9. VS Code 成主宰、Vue 备受热捧!2019 前端开发趋势必读

    前端在生产和开发中占据着越来越重要的地位,PC 端.手机端.桌面端.智能手表端等等设备都离不开前端的身影.本文将围绕框架.编程语言.工具.React.Vue 等方面,全面回顾 2019 年前端与 We ...

随机推荐

  1. BIO,NIO,AIO 总结

    BIO,NIO,AIO 总结 Java 中的 BIO.NIO和 AIO 理解为是 Java 语言对操作系统的各种 IO 模型的封装.程序员在使用这些 API 的时候,不需要关心操作系统层面的知识,也不 ...

  2. Codeforces #698 (Div. 2) E. Nezzar and Binary String 题解

    中文题意: 给你两个长度为 \(n\) 的01串 \(s,f,\)有 \(q\) 次询问. 每次询问有区间 \([\ l,r\ ]\) ,如果 \([\ l,r\ ]\) 同时包含\(0\)和\(1\ ...

  3. P5686 和积和

    写在前面 数学题接触的少,卡了半下午,愣是没想到直接往前缀和上考虑,按元素强推莽了半下午 Description 直接跳转到题目去啊 Solution 记 \(A,B\) 的前缀和序列分别为 \(sA ...

  4. CSS定位走一波(定位学习续)

    又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目. 如何让垂直方向居中,解决方式:在父元素添加over ...

  5. Box Model 盒子模型

    Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...

  6. (转)pip和easy_install使用方式

    easy_install 跟 pip 都是 Python 的套件管理程式,有了它們,在使用 Python 開發程式的時候會帶來不少方便. easy_install 和 pip 有什麼不一樣?據 pip ...

  7. 获取java栈异常

    package com.loan.modules.extbiz.in.rabbitmq.util; import java.io.PrintWriter; import java.io.StringW ...

  8. UML——关系

     一.宏观导图: 二.细节 1.关联:指的是类与类之间的结构性关系,即整体-部分关系.一般的关联关系中有单向的和双向的. 特殊关联中的,有聚合和组合,其实我更愿意用英文去理解,这些人翻译的让我很恶 ...

  9. python flask_sqlalchemy 多态 polymorphic 实现单表继承

    sqlalchemy 多态 polymorphic 实现单表继承 sqlaclchemy中的单表继续就是以一个模型类为基类,其他模型类继承基类,所有模型类的的数据都存一张表里面(也可以是多张,只不过基 ...

  10. jRating五星评级

    <!DOCTYPE html> <html> <head> <title>jrating使用示例</title> <meta char ...