It’s hard to keep track of new features in JavaScript(ECMAScript), and even harder to find useful code examples.

Therefore, in this article, I will introduce all 18 features listed in the completed proposal for TC39 added in ES2016, ES2017, and ES2018 (final draft), and show them useful examples.

This is a fairly long post, but should be a simple read. Think of it as Netflix binge reading. After that, I guarantee you’ll know a lot about these features.

Let’s look at them one by one:

Includes is a simple instance method on arrays and makes it easy to find if an item is in an Array (including NaN unlike indexOf)

const arr = [ 1, 2, 3, 4, NaN];



// Es2016 is not used

if(arr.indexOf(3) >= 0){

  console.log(true);

}



/ / use

if(arr.includes(3)){

  console.log(true);

}



//ps: Note that indexOf does not support finding nans

arr.includes(NaN) // true

Arr.indexof (NaN) // -1 (indexOf does not support NaN)

Copy the code

Trivia: People want to name the JavaScript specification contains, but this is obviously already used by Mootools, so they use includes.

Object.entries() is related to object.keys, but instead of just returning keys, it returns keys and values as an array. This makes it easy to do things like use objects in loops or convert objects to Maps.

Case 1:

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };

/ / ES5.1

// Instead of extracting keys and then recycling

Object.keys(cars).forEarch(function(key) {

 console.log('key: ' + key + 'value: ' + cars[key]);

})



//ES2017 (ES8)

/ / use Object. Entries

for(let [key value] of Object.entries(cars)) {

   console.log(`key: ${key} value: ${value}`);

}

Copy the code

Example 2:

const cars = { 'BMW': 3, 'Tesla': 2, 'Toyota': 1 };



//ES2015

/ / no use

// Get the object key, then add each item to map in the loop



const maps = new Map();

Object.keys(cars).forEarch(key => {

   map1.set(key, cars[key]);

})



console.log(map1) // Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}



/ / ES2017 and later

/ / use

const map = new Map(Object.entries(cars));



console.log(map) //Map { 'BMW' => 3, 'Tesla' => 2, 'Toyota' => 1}

Copy the code

//ES2017

// If you have a list of items of different lengths and want to format their display purpose, you can use padStart



const formatted = [0, 1, 12, 123, 1234, 12345].map(num => 

Num.tostring ().padstart (10, '0') // Add 0 until the length is 10

);



console.log(formatted);



/ / print

/ / /

/ / '0000000000',

/ / '0000000001',

/ / '0000000012',

/ / '0000000123',

/ / '0000001234',

/ / '0000012345',

// ]

Copy the code

Emojis and other double-byte characters are represented using multiple bytes of Unicode. So padStart and padEnd may not work as expected! ⚠ ️

For example: Suppose we’re trying to populate the string heart with the ❤️ emoji to reach 10 characters. The results are shown below

// Note, not 5 hearts, only 2 hearts and 1 strange-looking heart!



'heart'. PadStart (10, "❤ ️"); // prints.. '❤ ️ ❤ ️ ❤ heart'

Copy the code

This is because ❤️ is 2 characters long (‘\u2764\uFE0F’)! The word heart itself is five characters, so we are left with five characters. So,JS fills two hearts with ‘\u2764\uFE0F’ and produces ❤️❤️. For the last one just use the mind’s first byte \ u2764 to generate ❤

So the result is: ❤️❤️❤heart

PS: You can use this link to view Unicode character conversions

This is a small update that allows us to put a trailing comma after the last function argument. Why is that? To help a tool like Git only leaves new developers to blame.

The following example shows the problem and solution:

/ / the problem



// #1 created by the developer

function Person(

    name, 

  age

 ) {

     this.name = name;

       this.age = age;

}



//#2 developer adds address

function Person(

  name,

Age, // Add trailing comma <-------- Because of commas, developers are warned by tools like git

Address // Add a new parameter

  ) {

       this.name = name;

       this.age = age;

this.address = address; // Add the line

}



/ / ES2017 solution

Allow #1 developers to add trailing commas

//#1 is created as follows

function Person(

 name, 

Ange, //<------- #2 developers do not need to change this line due to trailing commas

    ) {

     this.name = name;

       this.age = age;

}

Copy the code

Note: You can also use trailing commas to call functions

If you are waiting for the result of an asynchronous function, you need to use Promise’s then syntax to capture its result.

In the following example, we want to log the result using console.log, but not in doubleAndAdd. So we want to wait and pass the result to console.log using the then syntax.

// The asynchronous function itself returns a Promise

async function doubleAndAdd(a, b) {

 a = await doubleAfterlSec(a);

   b = await doubleAfterlSec(b);

   return a + b;

}



/ / usage

doubleAndAdd(1, 2).then(console.log);



function doubleAfterlSec(param) {

    return new Promise (resolve => {

     setTimeout(resolve(param * 2), 1000);

   });

}

Copy the code

There are various ways to handle errors when using asynchronous wait below.

Option 1 – Use try catch in functions

// 1. Use try catch



async function doubleAndAdd(a, b) {

 try {

       a = await doubleAfterlSec(a);

       b = await doubleAfterlSec(b);

   } catch (e) {

       return NaN; // return something

 }

   return a + b;

}



/ / usage

doubleAndAdd('one', 2).then(console.log) //NaN

doubleAndAdd(1, 2).then(console.log) // 6



function doubleAfterlSec(param) {

    return new Promise((resolve, reject) => {

        setTimeout(function() {

         let val = param * 2;

            isNaN(val) > reject(NaN) : resolve(val);

     }, 1000);

   });

}

Copy the code

Option 2 — Catch every await expression

Since each await expression returns a Promise, you can catch an error on each line, as shown below.

//Option 2 - *Catch* error on each waiting line

// Because each wait expression is itself a Promise

async function doubleAndAdd(a, b) {

a = await doubleAfter1Sec(a).catch(e => console.log('"a" is NaN')); / / 👈

b = await doubleAfter1Sec(b).catch(e => console.log('"b" is NaN')); / / 👈

if (! a || ! b) {

   return NaN;

  }

  return a + b;

}

/ / usage:

doubleAndAdd('one', 2).then(console.log); // NaN  and logs:  "a" is NaN

doubleAndAdd(1, 2).then(console.log); / / 6

function doubleAfter1Sec(param) {

   return new Promise((resolve, reject) => {

        setTimeout(function() {

         let val = param * 2;

            isNaN(val) ? reject(NaN) : resolve(val);

        }, 1000);

   });

}

Copy the code

Option 3 — Catch the entire async-await function

//Option 3 - Don't do anything, capture outside function

// Because async/wait returns a Promise, we can catch errors in the entire function

async function doubleAndAdd(a, b) {

 a = await doubleAfter1Sec(a);

 b = await doubleAfter1Sec(b);

 return a + b;

}

/ / usage

doubleAndAdd('one', 2)

.then(console.log)

.catch(console.log); / / 👈 👈 🏼 < -- -- -- -- -- -- -- the use "catch"

function doubleAfter1Sec(param) {

 return new Promise((resolve, reject) => {

  setTimeout(function() {

   let val = param * 2;

   isNaN(val) ? reject(NaN) : resolve(val);

  }, 1000);

 });

}

Copy the code

The main idea is to provide JavaScript with some kind of multithreading capability so that JS developers can write high-performance, concurrent programs by allowing themselves to manage memory rather than having the JS engine manage memory.

This is done with a new type of global object called SharedArrayBuffer, which essentially stores data in a shared memory space. So this data can be shared between the main JS thread and the webworker thread.

Until now, if we wanted to share data between the main JS thread and the Web worker, we had to copy the data and send it to other threads using postMessage. That’s it!

You only need to use SharedArrayBuffer, the main thread, and multiple Web worker threads to access the data.

But sharing memory between threads can lead to a race situation. To avoid race conditions, “Atomics” global objects are introduced. Atomics provides various ways to lock shared memory when a thread is using its data. It also provides a way to securely update data in shared memory.

It is recommended that you use this functionality through a library, but there are no libraries built on top of this functionality.

If you are interested, I recommend reading:

1. From Workers to Shared Memory — Lucasfcosta
2. A Cartoon intro to SharedArrayBuffers — Lin Clark
3. Shared Memory and Atomics — Dr. Axel Rauschmayer

Currently in re, although dot (“. ) should match a single character, but it does not match newline characters like \n \r \f.

Such as:

/ / before

/first.second/.test('first\nsecond'); //false

Copy the code

This enhancement enables the dot operator to match any single character. To make sure this doesn’t break anything, we need to use the \ S flag when creating the re to make it work.

//ECMAScript 2018

/first.second/s.test('first\nsecond'); / / true Notice: / s 👈 🏼

Copy the code

Here’s the overall API in the proposal document:

const re = /foo.bar/s;

// const re = new RegExp('foo.bar', 's');



re.test('f00\nbar'); //true

re.dotAll // true

re.flags // 's'

Copy the code

/ / before

let re1 = /(\d{4})-(\d{2})-(\d{2})/;

let result1 = re1.exec('2015-01-02');

console.log(result1);

//

//["2015-01-02", "2015", "01", "02", index: 0, input: "2015-01-02", groups: undefined]



// Later (ES2018)

let re2 = /(? <year>\d{4})-(? <month>\d{2})-(? <day>\d{2})/u;

let result2 = re2.exec('2015-01-02');

console.log(result2);

//["2015-01-02", "2015", "01", "02", index: 0, input: "2015-01-02", groups: { year: '2015', month: '01', day: '02'}]





/ / usage:

// If you want to know the year, you can:



console.log(result2.groups.year) //2015

Copy the code

Now, the named group functionality is baked into the String’s Replace instance method. So we can easily swap words in strings.

For example, change “firstName, lastName” ==> “lastName, firstName”

// Replace "firstName, lastName" ==> "lastName, firstName"



let re = /(? <firstName>[A-Za-z]+) (? <lastName>[A-Za-z]+$)/u;



'Raja Rao'.replace(re, '$<lastName>, $<firstName>'); // "Rao, Raja"

Copy the code

// Extract firstName and age

// Store the remaining items in the "remaining" variable.



let { fristName, age, ... remaining } = {

    fristName: 'john',

  lastName: 'smith',

  age: 20,

Height: '5.10',

 race: 'martian',

};

firstName; //john

age //20

Remaining //{lastName: 'Smith ', height: '5.10', race:' Martian '}

Copy the code

Tip: The extension operator is used on the right side of the equal sign. Rest is used on the left side of the equal sign.

// Merge person and account

const person = { fName: 'john', age: 20 };

const account = { name: 'bofa', amount: '$1000' };



// Extract the attributes of person and Account by extending the operator and add them to a new object.

const personAndAccount = { ... person, ... account };

personAndAccount; // {fName: 'john', age: 20, name: 'bofa', amount: '$1000' }

Copy the code

It is not easy to write regExps to match various Unicode characters. Items like \w, \w, \d can only match English characters and numbers. But what about numbers in Hindi, Greek and other languages?

This is where Unicode Property Escapes comes in. As a result, Unicode adds a metadata attribute to each symbol (character) and uses it to group or describe various symbols.

For example, the Unicode database combines all Hindi characters (API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API API So we can search Script=Devanagari and get all Hindi characters.

Devanagari(Sanskrit) can be used in Marathi, Hindi, Sanskrit, various Indian languages.

Starting with ECMAScript 2018, we can use \ P escape characters and {Script=Devanagari} to match all Indian characters. That is, we can use: \p{Script=Devanagari} in the RegEx to match all Sanskrit characters.

// He follows to match multiple Hindi characters

/ ^ \ p {Script = Devanagari} + $/ u.t est (' ह ि न ् द ी '); //true

//PS: there are 3 Hindi characters h

Copy the code

Similarly, Unicode databases combine all Greek characters into Script_Extensions (and Script) properties with a value of Greek. So we can use Script_Extensions=Greek or Script=Greek to search for all Greek characters.

That is, we can use it in RegEx:\p{Script = Greek}To match all Greek characters.

// Matches a Greek character below

/ \ p {Script_Extensions = Greek} / u.t est (" PI "); // true

Copy the code

In addition, the Unicode database stores various types of Emojis in Boolean Emojis with the attribute value “true”, Emoji_Component, Emoji_Presentation, Under Emoji_Modifier and Emoji_Modifier_Base. So we can find all the emojis by simply selecting them.

In other words, we can use:\p{Emoji}.\Emoji_ModifierAnd so on to match various Emojis.

The following example will make it clear.

// Here are the matching emoticons

/ \ p {Emoji} / u.t est (' ❤ ️ '); //true

// The following operation failed because yellow emojis do not have Emoji_Modifier!

/ \ p {Emoji} \ p {Emoji_Modifier} / u.t est (' ✌ ️ '); //false

\p{Emoji} is followed by \p{Emoji_Modifier}.

/ \ p {Emoji} \ p {Emoji_Modifier} / u.t est (' ✌ 🏽 '); //true

/ / interpretation:

By default, the victory emoji is yellow. If we use brown, black or other of the same emoticon, they are considered variants of the original emoticon and are represented by two Unicode characters. One is the original emoji and the other is the Unicode character of the color. In the example below, although we only see a brown victory emoji, it actually uses two Unicode characters, one for emoji and one for brown.



// In the Unicode database, these colors have the Emoji_Modifier attribute. Therefore, we need to use \ P {Emoji} and \ P {Emoji_Modifier} to correctly and completely match the brown Emoji.



/ \ p {Emoji} \ p {Emoji_Modifier} / u.t est (' ✌ 🏽 '); //true

Copy the code

Finally, we can negate a match with a capitalized “P” (\P) escape character instead of a small P (\P).

Reference: ECMAScript 2018 Proposal

This is a very useful feature. Basically it allows us to easily create asynchronous code loops!

This feature adds a new “for-await-of” loop that allows us to call asynchronous functions to return promises (or arrays with a series of promises). The cool thing is that the loop waits for each Promise to resolve before the next loop.

const promises = [

 new Promise(resolve => resolve(1)),

  new Promise(resolve => resolve(2)),

  new Promise(resolve => resolve(3)),

]

/ / before

// for-of uses regular synchronous iterators

// Don't wait for Promise to solve



async function test1() {

 for (const obj of promise) {

Console. log(obj) // Records three Promise objects

  }

}



/ / after

// for-wait-of uses asynchronous iteration



async function test2() {

 for await (const obj of promises) {

console.log(obj); / / 1, 2, 3

 }

}



test1() // promise, promise, promise

Test2 () / / 1, 2, 3

Copy the code

Author: sachieyuan

• Links to this article: Blog.rsuitejs.com/2018/04/11/…
• Copyright Notice: All articles on this blog are licensed under a CC BY-NC-SA 3.0 license unless otherwise stated. Reprint please indicate the source!