Introduction to the

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

Today we’re going to look at some of the new ES10 features.

ES10 introduces two major features and four minor features, which we’ll discuss later.

Array’s new methods, flat and flatMap

In ES10, two new methods have been introduced for Array, namely Flat and FlatMap.

Let’s start with flat.

Array<T>.prototype.flat() : Array<T>.prototype.flat()

.flat(depth = 1): any[]

Flat is used to take the contents of an Array within an Array and put them into the topmost Array. We can pass in a depth parameter that represents the Array level at which flat is required.

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]

When depth=0, it means that flat operations will not be performed on the Array inside the Array.

Array<T>.prototype.flatMap();

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

FlatMap is a combination of map and flat, and the following two operations are equivalent:

arr.flatMap(func)
arr.map(func).flat(1)

Let’s look at a few examples of FlatMap:

> ['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' ]

Object’s new method fromEntries

Object. The main purpose of the fromEntries is to create new objects with the given key and value.

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

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

The opposite of Fromentries is Object.Entries, which is used to traverse Object properties.

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

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

String’s new methods trimStart and trimEnd

JavaScript already has a trim method that eliminates Spaces before and after a String.

> '  abc  '.trim()
'abc'

However, there may be times when you need to eliminate the front or back whitespace. ES10 introduces the trimStart and trimEnd methods:

> '  abc  '.trimStart()
'abc  '
> '  abc  '.trimEnd()
'  abc'

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

Accessible Symbol’s description attribute

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

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

Before ES10, we wanted to access the Symbol’s description by doing this:

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

Now we can access it directly from the description property:

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

Ignorable catch parameter

In traditional writing, catch accepts an error parameter:

} catch (error) {// ··}

But sometimes we already know that the exception is not important, or we want to ignore the exception, so in ES10 we can omit the error parameter:

{// ··} catch {// ··}

Stable sort of Array

Array has a sort function that sorts elements by their contents.

ES10 introduced the concept of stable sort, which means that if the sort keys are the same, then the order of those same keys will not change during the sort.

Here’s an example:

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

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

We sort by key, so that a is in front of b, but the positions of the two key=b elements don’t change.

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

JSON.stringify

JSON is a convenient data transfer format that is less complex than XML and has the advantage of being small and easy to transfer.

According to the specification of RFC3629, JSON transfers 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 get to JSSON. Stringify, let’s review ES6 Escape Sequences.

There are three escape types in ES6:

1. HEX escape: hexadecimal escape Escape is 2-bit hexadecimal.

  > '\x7A' === 'z'
  true

1. Unicode escape: Escape is a 4-bit hexadecimal system

 > '\u007A' === 'z'
  true

1. Unicode Code Point Escape: Escapes 1-bit or multi-bit hexadecimal

  > '\u{7A}' === 'z'
  true

The last escape was introduced in ES6.

The Unicode character set is eventually stored in a file or in memory, and it takes up too much space to store it directly. How do I save it? Do you use fixed 1 byte, 2 bytes, or variable length bytes? Therefore, according to the different encoding methods, we divided them into UTF-8, UTF-16, UTF-32 and other encoding methods.

UTF-8 is a variable-length encoding scheme, which uses 1-4 bytes for storage. UTF-16 uses two or four bytes for storage.

UTF-32, on the other hand, uses 4 bytes for storage. Of the three encoding methods, only UTF-8 is ASCII compatible, which is why UTF-8 is more common in the world (after all, computer technology is developed by Westerners).

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 a possible problem with the original JSON.stringify.

In ES10, JSSON. Stringify returns code unit escape sequences for those characters that cannot be converted to UTF-8.

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

JSON is a subset of ECMAScript

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

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

JSON.parse(json); // OK

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

The toString method of Function

In ES10, if Function can be represented in ECMAScript source code, toString directly returns the code for the Function:

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

If the method is native, such as the underlying C or C ++ implementation code, then directly return [native code]:

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

The Flydean program stuff

This paper links: http://www.flydean.com/ecmascript-10/

This article is from Flydean’s blog

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