Introduction to the

ES10 is a release released by the ECMA Association in June 2019. It is also called ES10 because it is the tenth version of ECMAScript.

Today we’ll cover the new ES10 features.

ES10 introduces two major features and four minor features, which we’ll cover next.

Array’s new methods flat and flatMap

In ES10, two new methods were introduced to Array, flat and flatMap.

Let’s take a look at Flat.

Let’s look at array.prototype.flat () :

.flat(depth = 1): any[]
Copy the code

What flat does is it takes the contents of the Array and puts them in the top Array. We can pass in a depth argument to indicate the Array level that needs to be flat.

Here’s an example:

> [ 1.2[3.4], [[5.6]] ].flat(0) // no change
[ 1.2[3.4], [[5.6[]] > [1.2[3.4], [[5.6]] ].flat(1)
[ 1.2.3.4[5.6]] > [1.2[3.4], [[5.6]] ].flat(2)
[ 1.2.3.4.5.6 ]
Copy the code

When depth is 0, the flat operation will not be performed on the built-in Array.

Let’s look at array.prototype.flatmap () again:

 .flatMap<U>(
  callback: (value: T, index: number, array: T[]) = > U|Array<U>, thisValue? : any ): U[]Copy the code

FlatMap is a combination of map and flat. The following two operations are equivalent:

arr.flatMap(func)
arr.map(func).flat(1)
Copy the code

Let’s look at some examples of flatmaps:

> ['a'.'b'.'c'].flatMap(x= > x)
[ 'a'.'b'.'c' ]
> ['a'.'b'.'c'].flatMap(x= > [x])
[ 'a'.'b'.'c' ]
> ['a'.'b'.'c'].flatMap(x= > [[x]])
[ [ 'a' ], [ 'b' ], [ 'c']] > ['a'.'b'.'c'].flatMap((x, i) = > new Array(i+1).fill(x))
[ 'a'.'b'.'b'.'c'.'c'.'c' ]
Copy the code

FromEntries, a new method for Object

The main function of fromEntries is to create an Object with a given [key,value].

var newObj =  Object.fromEntries([['foo'.1], ['bar'.2]]);
console.log(newObj);
{ foo: 1.bar: 2 }
Copy the code

In the example above, we create a new object from the two key-value pairs given.

The opposite of fromEntries is object. entries, which are used to traverse Object properties.

Again, let’s call the Object.entries method:

console.log(Object.entries(newObj)); [['foo'.1 ], [ 'bar'.2]]Copy the code

String’s new methods trimStart and trimEnd

JS already has a trim method that eliminates whitespace before and after strings.

> ' abc '.trim()
'abc'
Copy the code

However, it may be necessary to eliminate Spaces before or after the trimStart and trimEnd methods. ES10 introduces trimStart and trimEnd methods:

> ' abc '.trimStart()
'abc '
> ' abc '.trimEnd()
' abc'
Copy the code

Note that some browsers may already have trimLeft and trimRight methods, which are equivalent to trimStart and trimEnd in the EMCAScript specification.

Description property of the accessible Symbol

When we create the Symbol, we can pass a description as an argument to construct the Symbol:

const sym = Symbol('www.flydean.com');
Copy the code

Before ES10, we wanted to access the description of the Symbol like this:

console.log(String(sym));
//Symbol(www.flydean.com)
Copy the code

We can now access the description property directly:

console.log(sym.description);
//www.flydean.com
Copy the code

A negligible catch parameter

In traditional writing, catch takes an error argument:

try {
  / /...
} catch (error) {
  / /...
}
Copy the code

But sometimes we already know that the exception is unimportant, or we want to ignore it, so in ES10 we can omit the error argument:

try {
  / /...
} catch {
  / /...
}
Copy the code

Stable sort of Array

Array has a sort function that sorts by element content.

ES10 introduces the concept of stable sort, which means that if the sort keys are the same, the order of the same keys will not change in the sort.

Here’s an example:

const arr = [
  { key: 'b'.value: 1 },
  { key: 'a'.value: 2 },
  { key: 'b'.value: 3},];Copy the code

arr.sort((x, y) = > x.key.localeCompare(y.key, 'en-US'));
Copy the code

We sort by key so that a comes before B, but the two elements whose key is equal to b don’t change.

console.log(arr); [{key: 'a'.value: 2 },
  { key: 'b'.value: 1 },
  { key: 'b'.value: 3}]Copy the code

JSON.stringify

JSON is a very convenient data transfer format. It is not as complex as XML and has the advantage of being small and easy to transfer.

According to the specification of RFC3629, transferring JSON in a public environment must be encoded using utf-8.

JSON text exchanged between systems that are not part of a closed ecosystem MUST be encoded using UTF-8 [RFC3629].

Before we look at JSON.stringify, let’s review Escape sequences in ES6.

There are three escape types in ES6:

1. Hex escape: hexadecimal escape. Escaped is 2-bit hexadecimal.

  > '\x7A'= = ='z'
  true
Copy the code

2. Unicode escape: The escape is a 4-bit hexadecimal

 > '\u007A'= = ='z'
  true
Copy the code

3. Unicode code point escape: Escape is a hexadecimal of 1 or more bits

  > '\u{7A}'= = ='z'
  true
Copy the code

The last escape was introduced in ES6.

Unicode character sets are eventually stored in files or memory, which takes up too much space. How do I save it? Use fixed 1 byte, 2 bytes or variable length bytes? Therefore, according to the different encoding methods, we can divide into UTF-8, UTF-16, UTF-32 and other encoding methods.

Utf-8 is a variable-length encoding scheme that uses 1-4 bytes for storage. Utf-16 uses two or four bytes for storage.

Utf-32 uses four bytes for storage. Of the three, only UTF-8 is ASCII compatible, which is why UTF-8 is more commonly used internationally (after all, computer technology was invented in the West).

We know that in Unicode, characters from U+D800 to U+DFFF are reserved for UTF-16 and cannot be converted to UTF-8 if we enter characters in this range.

This is the problem with the original json.stringify.

In ES10, json.stringify returns the corresponding code Unit escape sequences for characters that cannot be converted to UTF-8.

console.log(JSON.stringify('\u{D800}'));
"\ud800"
Copy the code

JSON is classified as a subset of ECMAScript

Previously, JSON was not a subset of ECMAScript, resulting in characters that could be included in JSON that could not be included in ECMAScript literals, such as U+2028 and U+2029:

const sourceCode = '"\u2028"';
eval(sourceCode); // SyntaxError

JSON.parse(json); // OK
Copy the code

With this change, we no longer need to distinguish between JSON and ECMAScript when coding.

Function’s toString method

In ES10, toString returns Function code directly if it can be expressed as ECMAScript source code:

> class C { foo() { /*hello*/ } }
> C.prototype.foo.toString()
'foo() { /*hello*/ }'
Copy the code

For native methods, such as the underlying C or C ++ implementation, return [Native code]:

> Math.pow.toString()
'function pow() { [native code] }'
Copy the code

Author: Flydean program stuff

This paper links: www.flydean.com/ecmascript-…

Source: Flydean’s blog

Welcome to pay attention to my public number: “procedures those things” the most popular interpretation, the most profound dry goods, the most concise tutorial, many you do not know the small skills you find!