“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

In June 2019, the ECMA Association officially launched the tenth version of ES, also known as ES10, which brings six new features. Let’s take a closer look.

Array’s new methods flat and flatMap

Array Array has two new methods, flat and flatMap. Used for array reduction and traversal.

Array.prototype.flat()

The Flat () method iterates through the array and merges the array according to the optional depth argument, returning a new array. Example:

const arr = [1.2.3[1.2.3]];
arr.flat(); // [1, 2, 3, 1, 2, 3]


const arr1 = [1.2.3[1.2.3[1.2.3]]];
arr1.flat(); [1, 2, 3, 1, 2, 3, [1, 2, 3]]


// Specify the depth. If no depth is specified, the default value is 1
const arr2 = [1.2.3[1.2.3[1.2.3]]];
arr2.flat(2); // [1, 2, 3, 1, 2, 3]
Copy the code

In addition, the flat() method can be used to strip arrays of null values. Example:

const arr = [1.3,];
arr.flat(); / / [1, 3]
Copy the code

Array.prototype.flatMap()

As with array.prototype.map (), this is used to traverse arrays of numbers, using a mapping function to map each element, but flatMap is usually more efficient. Example:

const arr = [1.2.3.4.5.6];
arr.flatMap(x= > [++x]); // [2, 3, 4, 5, 6, 7]
Copy the code

FromEntries, a new method for Object

In contrast to Object.entries(), fromEntries creates an Object with a specified key value, while entries are resolved into key-value pairs through objects. Example:

const arr = [ ['user'.'Sam'], ['sex'.'1'], ['year'.'1996']].const obj = Object.fromEntries(arr); 
// {user: "Sam", sex: "1", year: "1996"}
Copy the code
const obj = {user: "Sam".sex: "1".year: "1996"};
const arr = Object.entries(obj)
// [ ['user', 'Sam'], ['sex', '1'], ['year', '1996'] ]
Copy the code

String’s new methods trimStart and trimEnd

This is easy to understand, removing the blank string at the beginning or end of the string.

Description property of the accessible Symbol

When constructing Symbol, there is an extra parameter description, which is convenient for us to access the description attribute of Symbol. Example:

const symDemo = Symbol('Thanks');

/ / before
console.log(String(symDemo)); // Symbol(Thanks)

/ / now,
console.log(symDemo.description); // Thanks
Copy the code

A negligible catch parameter

In the past, when we caught an exception using a try catch, the catch had to pass in arguments. In some cases, exceptions were not so important, so the catch argument became optional in ES10. Example:

/ / before
try {} catch(e) {}


/ / now,
try {} catch{}
Copy the code

Write in the last

Writing is not easy, I hope I can get a “like” from you. If the article is useful to you, choose “bookmark”. If there are any mistakes or suggestions, please comment and correct them. Thank you. ❤ ️

Welcome to other articles

  • Practice: Implement a Message component with Vue3
  • Actual combat: Vue3 Image components, incidentally support lazy loading
  • What updates does One Piece, vue.js 3.0 bring
  • An article digests the major new features of ES7, ES8, and ES9
  • Common problems and solutions for technical teams
  • Introduction to 10 common new features in ES6
  • Vue3 script Setup syntax is really cool