Shulou(Shulou.com)06/03 Report--

This article is to share with you about the new features of ES10. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Although ES10 does not have as many new features as ES6, ES10 still has some useful features. The text introduces the new features of ES10 with simple examples. In this way, we can quickly understand without having to read too many official explanations.

The new features of ES10 are as follows:

Array methods: flat and flatMap

Object.fromEntries

String methods: trimStart and trimEnd

Description property of Symbol

Parameters of try {} catch {} / / catch can be omitted.

JSON ⊂ ECMAScript (make ECMAScript compatible with all text supported by JSON)

Well-formed JSON.stringify ()

Stable Array.prototype.sort ()

Modified Function.toString

BigInt is the seventh primitive type.

Dynamic import

Standardize globalThis objects

1. Array.flat () & & Array.flatMap

The Array.flat () method recursively traverses the array at a specified depth and merges all elements with the elements in the traversed subarray into a new array.

The Array.flatMap () method first maps each element using a mapping function, and then compresses the result into a new array. It is almost the same as map and flat with a depth value of 1, but flatMap is usually slightly more efficient in merging into one method.

Example 1:

Array.flat ()

Let multi = [1pje 2pr 3, [4pje 5je 6, [7pje 8pje 9, [10pr 11je 12]]; multi.flat (); / / [1pje 2pr 3pr 5pr 6pas Array (4)] multi.flat (). Flat (); / / [1pr 2pr 4pas 7pas (3)] multi.flat (). Flat (). Flat (); / / [1jong 2jong, 3pas, 5pr, 5pas, 6pas, 8pas, 9pr, 11pr 12] multi.flat (Infinity) / / [1,2,3,4,5,6,7,8,9,10,11,12]

Array.flatMap ()

Let array = [1,2,3,4,5]; array.map (x = > [x, x * 2])

The current results of array:

[Array (2), Array (2), Array (2)] 0: (2) [1,2] 1: (2) [2,4] 2: (2) [3,6]

Use the flatMap method:

Array.flatMap (v = > [v, v * 2]); [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]

Comprehensive example:

2.Object.fromEntries ()

The Object.fromEntries () method converts the list of key-value pairs into an object.

Example 1:

Let obj = {apple: 10, orange: 20, banana: 30}; let entries = Object.entries (obj); entries; (3) [Array (2), Array (2), Array (2)] 0: (2) ["apple", 10] 1: (2) ["orange", 20] 2: (2) [banana ", 30] let fromEntries = Object.fromEntries (entries); {apple: 10, orange: 20, banana: 30}

Example 2:

3.String.protype.matchAll

One of the early questions was how to write the regular expression "match all"?

The best answer would suggest that String.match be used with regular expressions and / g or RegExp.exec with / g or RegExp.test with / g.

Let's first look at how the old specification works.

String.match with string parameters returns only the first match:

Let string = 'Hello';let matches = string.match (' l'); console.log (matches [0]); / / "l"

The result is a single "l" (note: matches are stored in matches [0] rather than matches)

The same is true for using string.match with the regex parameter:

Use the regular expression / l / to find the "l" character in the string "hello":

Let string = "Hello"; let matches = string.match (/ l /); console.log (matches [0]); / / "l"

Add / g mix

Let string = "Hello"; let ret = string.match (/ lUniqg); / / (2) ["l", "l"]

So why use a whole new matchAll approach? Before we solve this problem, let's take a look at the capture team.

Regular expression capture group

The capture group in regex simply extracts a pattern from the () parentheses, and you can use / regex/.exec (string) and string.match capture group.

A regular capture group is created by wrapping the pattern in (pattern), but to create a groups property on the result object, it is: (? pattern).

To create a new group name, simply append the? in parentheses, and in the result, the pattern match becomes group.name and appends to the match object. Here is an example:

String samples match:

Match.groups.color and match.groups.bird are created here:

Const string = 'black*raven lime*parrot white*seagull';const regex = / (?. *)\ * (? [a-z0-9] +) / string (match = regex.exec (string)) {let value = match [0]; let index = match.index; let input = match.input; console.log (`$ {value} at ${index} with' ${input}'); console.log (match.groups.color); console.log (match.groups.bird);}

The regex.exec method needs to be called multiple times to traverse the entire search result set. When .exec is called during each iteration, the next result is displayed (it does not immediately return all matches), so the while loop is used.

The output is as follows:

Black*raven at 0 with 'black*raven lime*parrot white*seagull'

Black

Raven

Lime*parrot at 11 with 'black*raven lime*parrot white*seagull'

Lime

Parrot

White*seagull at 23 with 'black*raven lime*parrot white*seagull'

White

Seagull

But the strange thing is:

If you remove / g from this regular expression, you will always create an infinite loop on the first result. This was a great pain in the past. Imagine that when you receive a regular expression from a database, you are not sure if it has / g at the end, you have to check it first.

Good reason to use .matchAll ()

It can be more elegant when used with capture groups, which are only part of the regular expression that uses the () extraction pattern.

It returns an iterator instead of an array, the iterator itself is useful.

Iterators can use the extension operator (...) Convert to an array.

It avoids regular expressions with the / g flag, which is useful when retrieving unknown regular expressions from a database or external source and using them with stale RegEx objects.

Regular expressions created with RegEx objects cannot use dots (.) Operator links.

Advanced: RegEx object changes track the internal .lastindex property of the last matching location, which can cause serious damage in complex situations.

How does .matchAll () work?

We tried to match all the instances of the letters e and l in the word hello, and since an iterator was returned, we could use for... The of loop iterates through it:

/ / Match all occurrences of the letters: "e" or "l" let iterator = "hello" .matchAll (/ [el] /); for (const match of iterator) console.log (match)

This time you can skip / g, the .matchall method does not need it, and the result is as follows:

['eyed, index: 1, input:' hello'] / / Iteration 1 ['lumped, index: 2, input:' hello'] / / Iteration 2 ['lumped, index: 3, input:' hello'] / / Iteration 3

Use the .matchAll () capture group example:

Const string = 'black*raven lime*parrot white*seagull';const regex = / (?. *)\ * (? [a-z0-9] +) /; for (const match of string.matchAll (regex)) {let value = match [0]; let index = match.index; let input = match.input; console.log (`$ {value} at ${index} with' ${input}'); console.log (match.groups.color); console.log (match.groups.bird);}

Notice that there is no / g flag, because .matchAll () already contains it, as printed as follows:

Black*raven at 0 with 'black*raven lime*parrot white*seagull'blackravenlime*parrot at 11 with' black*raven lime*parrot white*seagull'limeparrotwhite*seagull at 23 with 'black*raven lime*parrot white*seagull'whiteseagull

Perhaps aesthetically it is very similar to the original regular expression, performing a while loop implementation. But as mentioned earlier, for many of the reasons mentioned above, it is better to remove / g without causing an infinite loop.

Comprehensive examples:

4.String.trimStart () and String.trimEnd ()

TrimStart (): removes the opening space of the string.

TrimEnd (): removes the space at the end of the string.

Example 1:

Let greeting = "Space around"; greeting.trimEnd (); / / "Space around"; greeting.trimStart (); / / "Space around"

Example 2:

5.Symbol.Description

Description is a read-only property that returns a string of optional descriptions of the Symbol object.

Example 1:

Let mySymbol ='My Symbol';let symObj = Symbol (mySymbol); symObj; / / Symbol (My Symbol) symObj.description; / / "My Symbol"

Example 2:

The parameters of 6.catch can be omitted

In the past, catch statements in try/catch statements required a variable. The try/catch statement helps catch terminal-level errors:

Try {/ / Call a non-existing function undefined_Function undefined_Function ("Ihumm trying");} catch (error) {/ / Display the error if statements inside try above fail console.log (error); / / undefined_Function is undefined}

In some cases, the required error variables are unused:

Try {JSON.parse (text); / / a.count-b.count / perform a stable ES10 ranking: let sorted = fruit.sort (my_sort); console.log (sorted)

Console output (items appear in reverse order):

Example 2:

10. New Function.toString ()

The function is an object, and each object has a .toString () method because it originally existed on Object.prototype.toString (). All objects, including functions, are inherited from it through prototype-based class inheritance.

This means that we already have the funcion.toString () method.

But ES10 further attempts to standardize the string representation of all objects and built-in functions. Here are a variety of new cases:

Typical examples:

Function () {console.log ('Hello there.');} .toString ()

Output:

⇨ function () {console.log ('Hello there.');}

Directly in the method name .toString ()

Number.parseInt.toString (); ⇨ function parseInt () {[native code]}

Binding context:

Function () {} .bind (0) .toString (); ⇨ function () {[native code]}

Built-in callable function object:

Symbol.toString (); ⇨ function Symbol () {[native code]}

Dynamically generated functions:

Function* () {} .toString (); ⇨ function* () {}

Prototype.toString

Function.prototype.toString.call ({}); ⇨ Function.prototype.toString requires that 'this' be a Function "

11.BigInt-arbitrary precision integer

BigInt is the seventh primitive type.

BigInt is an integer of arbitrary precision. This means that variables can now represent ²numbers, not just 9007199254740992.

Const b = 1n; / / append n to create BigInt

In the past, integer values greater than 9007199254740992 were not supported. If exceeded, the value is locked to MAX_SAFE_INTEGER + 1:

Const limit = Number.MAX_SAFE_INTEGER; ⇨ 9007199254740991limit + 1; ⇨ 9007199254740992limit + 2; ⇨ 9007199254740992 {const module = await import (`. / api-scripts/button- click.js`); module.clickEvent ();})

Example 2:

13. Standardize globalThis objects

Before ES10, globalThis was not standardized, and normal projects can be compatible with different platforms in the following ways:

Var getGlobal = function () {if (typeof self! = = 'undefined') {return self;} if (typeof window! = =' undefined') {return window;} if (typeof global! = = 'undefined') {return global;} throw new Error (' unable to locate global object');}

But even that doesn't always work. As a result, ES10 added the globalThis object, which from now on is used to access the global scope on any platform:

But even that doesn't always work. As a result, ES10 added the globalThis object, which from now on is used to access the global scope on any platform:

JS is a dynamic language, which is very useful for web development. Since the emergence of ES6 in 2015, the JS language has undergone a dynamic evolution. In this article, we reviewed the features that appeared in ES10 (2019) and introduced some features that will remain stable in ES11 (2020) because they are in state 3 and are likely to be standardized in the next release.

Although many of these features may not be necessary for the development of Web applications, some features can regulate code that we previously implemented through skill or a great deal of verbosity.

The BUG that may exist after the code deployment cannot be known in real time. In order to solve these BUG, we spent a lot of time debugging log. By the way, we recommend a useful BUG monitoring tool, Fundebug.

Thank you for reading! This is the end of this article on "what are the new features of ES10?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.