Original link:
Medium.com/better-prog…
Here’s an overview of ECMAScript 2015-2021 features:
-
ES2015
-
ES2016
-
ES2017
-
ES2018
-
ES2019
-
ES2020
-
ES2021
Introduction to the
ES2021 is the 2021 version of ECMAScript. ES2021 doesn’t offer as many new features as ES2015, but it does incorporate some useful features.
This article introduces the new ES2021 features with easy-to-understand code examples. Before you do that, of course, you need to know the basics of JavaScript.
Here’s an overview of the new ES2021 features:
String.prototype.replaceAll
Promise.any
WeakRef
- Logical assignment operator
- Numeric separator
String.protype.replaceAll
Prior to ES2021, to replace all specified characters in a string, we could do this:
const fruits = '🍎 + 🍓 🍐 + +';
const fruitsWithBanana = fruits.replace(/\+/g.'🍌');
console.log(fruitsWithBanana); / / 🍎 🍌 🍐 🍌 🍓 🍌
Copy the code
ES2021 proposes the replaceAll method and mounts it on the String prototype, which can be used as follows:
const fruits = '🍎 + 🍓 🍐 + +';
const fruitsWithBanana = fruits.replaceAll('+'.'🍌');
console.log(fruitsWithBanana); / / 🍎 🍌 🍐 🍌 🍓 🍌
Copy the code
Promise.any
The promise.any method is similar to promise.race — whenever a Promise in a given iteration succeeds, the value of the first Promise is taken as its return value, Unlike promise.race, however, it will wait until all promises have failed before returning the failed value:
const myFetch = url= > setTimeout(() = > fetch(url), Math.floor(Math.random() * 3000));
const promises = [
myFetch('/endpoint-1'),
myFetch('/endpoint-2'),
myFetch('/endpoint-3')];// Use.then.catch
Promise.any(promises) // Any promise will succeed.
.then(console.log) / / such as' 3 '
.catch(console.error); // All the promises failed
/ / use the async - await
try {
const first = await Promise.any(promises); // Any promise returns successfully.
console.log(first);
}catch (error) { // All the promises failed
console.log(error);
}
Copy the code
WeakRef
WeakRef proposal mainly contains two new functions:
- Can be achieved by
WeakRef
Class to create a weak reference to an object - Can be achieved by
FinalizationRegistry
Class to perform custom methods after an object has been garbage collected
These two new features can be used together or separately, depending on your needs.
A WeakRef object contains a weak reference to an object, called a target or reference. By weakly referencing an object, it is possible for the object to be collected by the garbage collection mechanism without other references.
WeakRef is mainly used to cache and map large objects, so you can use it when you want an object to be garbage collected without being referenced elsewhere.
function toogle(element) {
const weakElement = new WeakRef(element);
let intervalId = null;
function toggle() {
const el = weakElement.deref();
if(! el) {return clearInterval(intervalId);
}
const decoration = weakElement.style.textDecoration;
const style= decoration === 'none' ? 'underline' : 'none';
decoration = style;
}
intervalId = setInterval(toggle, 1000);
}
const element = document.getElementById("link");
toogle(element);
setTimeout(() = > element.remove(), 10000);
Copy the code
FinalizationRegistry receives a registry callback function that can be used to register an event listener for the specified object, which triggers the listening event when the object is garbage collected as follows.
First, create a registry:
const registry = new FinalizationRegistry(heldValue= > {
/ /...
});
Copy the code
We can then register a specified object and also pass some parameters to the registrar callback:
registry.register(theObject, "some value");
Copy the code
Logical assignment operator
The difference between an assignment operator and an expression can be seen here.
The logical assignment operator combines a logical operator with an assignment expression. There are two types of logical assignment operators:
- Or equal to the (| | =)
- And is equal to (&&=)
/ / or equal to zero| a | b | a | | = b | a) after (operations | |true | true | true | true |
| true | false | true | true |
| false | true | true | true |
| false | false | false | false |
a ||= b
// Equivalent to:
a || (a = b);
/ / and equal to zero| a | b | a && = b | a) after (operations | |true | true | true | true |
| true | false | false | false |
| false | true | false | false |
| false | false | false | false |
a &&= b
// Equivalent to:
a && (a = b);
Copy the code
Numeric separator
With this feature, we use the “(_, U+005F)” delimiter to group numbers to improve readability:
1 _000_000_000 / / one billion
101 _475_938. 38 / / one hundred million
const amount = 12345 _00; // 12,345
const amount = 123 _4500; // 123.45 (reserve 4 decimal places)
const amount = 1 _234_500; / / 1234500
0.000 _001 // One in a million
1e10_000 / / 10 ^ 10000
const binary_literals = 0b1010_0001_1000_0101;
const hex_literals = 0xA0_B0_C0;
const bigInt_literals = 1_000_000_000_000n;
const octal_literal = 0o1234_5670;
Copy the code
conclusion
JavaScript is a dynamically typed language, which is beneficial for Web development in some ways. JavaScript has been evolving rapidly since ES2015. In this article, we highlight some of the new ES2021 features.
While your project may not use these new features, they do open up a lot of possibilities for project development, right?