1. 首页
  2. 前端进阶

10 New JavaScript Features in ES2020 That You Should Know

10 New JavaScript Features in ES2020 That You Should Know

Good news – the new ES2020 features are now finalised! This means we now have a complete idea of the changes happening in ES2020, the new and improved specification of JavaScript. So let’s see what those changes are.

TC39 stage 4:https://github.com/tc39/propo…

1: BigInt


BigInt, one of the most anticipated features in JavaScript, is finally here. It actually allows developers to have much greater integer representation in their JS code for data processing for data handling.

At the moment the maximum number you can store as an integer in JavaScript ispow(2, 53) - 1. But BigInt actually allows you to go even beyond that.  

ABigIntis created by appendingnto the end of the integer or by calling the constructor.

const theBiggestInt = 9007199254740991n; const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n const hugeButString = BigInt('9007199254740991'); // ↪ 9007199254740991n


However, you need to have annappended at the very end of the number, as you can see above. Thisndenotes that this is a BigInt and should be treated differently by the JavaScript engine (by the v8 engine or whatever engine it is using).

This improvement is not backwards compatible because the traditional number system is IEEE754 (which just cannot support numbers of this size).


You can use+,*,-,**and%withBigInts, just like withNumbers.

const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); // ↪ 9007199254740991 const maxPlusOne = previousMaxSafe + 1n; // ↪ 9007199254740992n const theFuture = previousMaxSafe + 2n; // ↪ 9007199254740993n, this works now! const multi = previousMaxSafe * 2n; // ↪ 18014398509481982n const subtr = multi – 10n; // ↪ 18014398509481972n const mod = multi % 10n; // ↪ 2n const bigN = 2n ** 54n; // ↪ 18014398509481984n bigN * -1n // ↪ –18014398509481984n const expected = 4n / 2n; // ↪ 2n const rounded = 5n / 2n; // ↪ 2n, not 2.5n

JS中文网 – 前端进阶资源教程 www.javascriptC.com

2: Dynamic import

Dynamic imports in JavaScript give you the option to import JS files dynamically as modules in your application natively. This is just like how you do it with Webpack and Babel at the moment.

This feature will help you ship on-demand-request code, better known as code splitting, without the overhead of webpack or other module bundlers. You can also conditionally load code in an if-else block if you like.

The good thing is that you actually import a module, and so it never pollutes the global namespace.


3: Nullish Coalescing


Nullish coalescing adds the ability to truly checknullishvalues instead offalseyvalues. What is the difference betweennullishandfalseyvalues, you might ask?

In JavaScript, a lot of values arefalsey, like empty strings, the number 0,undefined,null,false,NaN, and so on.

However, a lot of times you might want to check if a variable is nullish – that is if it is eitherundefinedornull, like when it’s okay for a variable to have an empty string, or even a false value.

In that case, you’ll use the new nullish coalescing operator,??


You can clearly see how the OR operator always returns a truthy value, whereas the nullish operator returns a non-nulllish value.

_Base case_. If the expression at the left-hand side of the??operator evaluates to undefined or null, its right-hand side is returned.

const response = { settings: { nullValue: null, height: 400, animationDuration: 0, headerText: '', showSplashScreen: false } }; const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default' const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default' const headerText = response.settings.headerText ?? 'Hello, world!'; // result: '' const animationDuration = response.settings.animationDuration ?? 300; // result: 0 const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

4: Optional Chaining


Optional chaining syntax allows you to access deeply nested object properties without worrying if the property exists or not. If it exists, great! If not,undefinedwill be returned.

This not only works on object properties, but also on function calls and arrays. Super convenient! Here’s an example:


Base case:

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]

a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
                              // otherwise, evaluates to `a.b()`

a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function
                             // invokes the function `a` otherwise

5: Promise.allSettled

ThePromise.allSettledmethod accepts an array of Promises and only resolves when all of them are settled – either resolved or rejected.

This was not available natively before, even though some close implementations likeraceandallwere available. This brings “Just run all promises – I don’t care about the results” natively to JavaScript.


6: String#matchAll

matchAllis a new method added to theStringprototype which is related to Regular Expressions. This returns an iterator which returns all matched groups one after another. Let’s have a look at a quick example:


7: globalThis

If you wrote some cross-platform JS code which could run on Node, in the browser environment, and also inside web-workers, you’d have a hard time getting hold of the global object.

This is because it iswindowfor browsers,globalfor Node, andselffor web workers. If there are more runtimes, the global object will be different for them as well.

So you would have had to have your own implementation of detecting runtime and then using the correct global – that is, until now.

ES2020 brings usglobalThiswhich always refers to the global object, no matter where you are executing your code:


8: Module Namespace Exports

In JavaScript modules, it was already possible to use the following syntax:

import * as utils from './utils.mjs'

However, no symmetricexportsyntax existed, until now:

export * as utils from './utils.mjs'

This is equivalent to the following:

import * as utils from './utils.mjs' export { utils }

9: Well defined for-in order

The ECMA specification did not specify in which orderfor (x in y) should run. Even though browsers implemented a consistent order on their own before now, this has been officially standardized in ES2020.

10: import.meta

Theimport.metaobject was created by the ECMAScript implementation, with anullprototype.

Consider a module,module.js:

<\script type="module" src="module.js"></script>

You can access meta information about the module using theimport.metaobject:

console.log(import.meta); // { url: "file:///home/user/module.js" }

It returns an object with aurlproperty indicating the base URL of the module. This will either be the URL from which the script was obtained (for external scripts), or the document base URL of the containing document (for inline scripts).


I love the consistency and speed with which the JavaScript community has evolved and is evolving. It is amazing and truly wonderful to see how JavaScript came from a language which was booed on, 10 years go, to one of the strongest, most flexible and versatile language of all time today.

Do you wish to learn JavaScript and other programming languages in a completely new way? Head on to anew platform for developersI’m working on to try it out today!

What’s your favorite feature of ES2020? Tell me about it by tweeting and connecting with me onTwitterandInstagram!

This is a blog post composed from my video which is on the same topic. It would mean the world to me if you could show it some love!




  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界


转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:10 New JavaScript Features in ES2020 That You Should Know


« 12道Mysql常见的面试题
36.01 个JavaScript 面试题为你加薪»
Flutter 中文教程资源


QR code