7 Interesting JavaScript Features in ES2020 That You Should Know

栏目: IT技术 · 发布时间: 4年前

内容简介:The world of web development moves fast, particularly in the JavaScript ecosystem. New features, frameworks, and libraries are continually emerging, and the minute you stop learning is the minute your skillset starts to become obsolete.So, I thought to wri

The world of web development moves fast, particularly in the JavaScript ecosystem. New features, frameworks, and libraries are continually emerging, and the minute you stop learning is the minute your skillset starts to become obsolete. One major part of keeping your JavaScript skills sharp is staying current on the latest features in JavaScript. 

So, I thought to write an article on seven interesting features in JavaScript ES2020 that you should know. Let’s see some interesting features in JavaScript.

1. BigInt

BigInt is a built-in object that provides a way to describe whole numbers larger than  pow(2,53)-1 , which is the highest number JavaScript can reliably represent with the  Number  primitive and represented by the  Number.MAX_SAFE_INTEGER  constant. A BigInt is built by appending n to the end of an integer literal or by calling the function BigInt() .

7 Interesting JavaScript Features in ES2020 That You Should Know

However we can express very large numbers using BigInt, there are some constraints when BigInt type is used with regular numbers. It cannot be used with methods in the built-in Math object and cannot be associated with instances of Number in operations. They must be used with the same type.

BigInt is not backward compatible with (IEEE754) standards because this number system cannot support very large numbers.

2. Nullish Coalescing

There are some conditions while coding, where you have to check for null  or  undefined  values instead of  falsey  values. In JavaScript, falsey values can be like blank strings, the number 0, undefined , null , false , NaN , etc. Nullish coalescing operator ?? adds the capability to check for nullish values instead of falsey values.

Let’s see how it’s works.

7 Interesting JavaScript Features in ES2020 That You Should Know

Looking at this we can clearly say Nullish Coalescing   operator  (??)  is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined , otherwise returns its left-hand side operand.

Contrary to the logical OR ( || ) operator, the left operand is returned if it’s falsey  value which is not null or undefined . See below for an example.

7 Interesting JavaScript Features in ES2020 That You Should Know

Looking at the above example, the OR operator always returns a truthy value, whereas the nullish coalescing operator returns a specified value.

3. Dynamic Import

The feature name is also straight forward, that it gives the ability to import the JavaScript files dynamically as modules in your application. This is really like how you do it with Webpack and Babel at the moment.

Dynamic import feature will serve you ship on-demand-request code, without the overhead of Webpack or other module bundlers. This is known as code splitting as the code is addressed in smaller bundles as required.

Look at the following example to understand how we dynamically import math.js module.

7 Interesting JavaScript Features in ES2020 That You Should Know

Here the math.js module is lazy loaded particularly when it is needed. This overcomes the initial page load times of our application. It also limits unnecessary module load in every page visit sessions even if the user uses the module feature or not.

Static import and dynamic import() are both helpful. Each has its own, very distinct, use cases. Use static imports for beginning paint dependencies, especially for above-the-fold content. Furthermore in other cases, examine loading dependencies on-demand with dynamic import() .

4. globalThis

Obtaining the global property in JavaScript has always created some difficulty. This is because many platforms have different ways to access it.

  • Client-side JavaScript uses window or self
  • Node.js uses global
  • Web workers use self

A novel object called globalThis gives you cross-platform access to the global object in JavaScript.

5. Optional Chaining

The optional chaining syntax allows you to access deeply nested object properties without worrying about whether the property exists or not. If it exists, great! If not,  undefined will be returned.

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

7 Interesting JavaScript Features in ES2020 That You Should Know

6. Promise.allSettled

The Promise.allSettled method accepts a series of Promises and only resolves when they are all resolved, resolved, or rejected.

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

7 Interesting JavaScript Features in ES2020 That You Should Know

7. String#matchAll

matchAll is a new method added to the string prototype that is related to regular expressions. This returns an iterator that returns all the matching groups one after the other. Let’s take a look at a quick example:

7 Interesting JavaScript Features in ES2020 That You Should Know


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息论、推理与学习算法

信息论、推理与学习算法

麦凯 / 高等教育出版社 / 2006-7 / 59.00元

本书是英国剑桥大学卡文迪许实验室的著名学者David J.C.MacKay博士总结多年教学经验和科研成果,于2003年推出的一部力作。本书作者不仅透彻地论述了传统信息论的内容和最新编码算法,而且以高度的学科驾驭能力,匠心独具地在一个统一框架下讨论了贝叶斯数据建模、蒙特卡罗方法、聚类算法、神经网络等属于机器学习和推理领域的主题,从而很好地将诸多学科的技术内涵融会贯通。本书注重理论与实际的结合,内容组......一起来看看 《信息论、推理与学习算法》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具