Introduction to new features of ECMAScript 2019 (ES10)

brief introduction

ES10 yes ECMA The association is in 2019 year 6 A version of this month , the reason being that ECMAScript The tenth version of , So it's also called ES10.

Let's talk about ES10 New features .

ES10 Introduced 2 Big features and 4 A small feature , Let's talk about it one by one .

Array New method of flat and flatMap

stay ES10 in , to Array Two new methods have been introduced , Namely flat and flatMap.

Let's take a look first flat.

Let's see Array<T>.prototype.flat() The definition of ：

.flat(depth = 1): any[]

flat The role of the Array Medium Array Take out the contents of , Put it on top Array in . We can pass in a depth Parameters , It means the need for flat Of Array Hierarchy .

for instance ：

> [ 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 When , It means it won't be right Array Built in Array Conduct flat operation .

Let's see Array<T>.prototype.flatMap() The definition of ：

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

flatMap yes map and flat The combination of , The following two operations are equivalent ：

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

Let's see a few flatMap Example ：

> ['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 New method of fromEntries

Object.fromEntries The main function of the system is through the given [key,value], To create a new Object object .

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

In the example above , Let's go through two given key-value Yes , Created a new object object .

and fromEntries The opposite way , Namely Object.entries, Used to traverse object properties .

It's just an example , Let's call it again Object.entries Method ：

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

String New method of trimStart and trimEnd

JS There is already trim Methods , Can eliminate String Space before and after .

> '  abc  '.trim()
'abc'

But sometimes it may be necessary to eliminate the spaces before or after ,ES10 Introduced trimStart and trimEnd Method ：

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

Be careful , Some browsers may already have trimLeft and trimRight Method , stay EMCAScript Specification , They and trimStart,trimEnd It is equivalent. .

addressable Symbol Of description attribute

We're creating Symbol When , You can pass in a description As a parameter to build Symbol：

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

stay ES10 Before , We want to visit Symbol Of description Here's how it works ：

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

Now we can go straight through description Property to access ：

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

Negligible catch Parameters

In the traditional way of writing ,catch It's about accepting a error Parametric ：

try {
  // ···
} catch (error) {
  // ···
}

But sometimes we already know that this anomaly is unimportant , Or say , We want to ignore this anomaly , So in ES10 in , We can omit this error Parameters ：

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

Array The stable ordering of data

Array There is one sort function , You can sort by element content .

ES10 The concept of stable sorting is introduced in , That is to say, if it's sorted key It's the same , So these are the same key There is no change in the order of .

for instance ：

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 according to the key To sort , So that a, be ranked at b front , But the two one. key=b The position of the elements in the matrix will not change .

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

JSON.stringify

JSON It's a very convenient data transfer format , It is not like XML So complicated , The advantage is small size , Easy to transmit .

according to RFC3629 The specification of , Transmit... In a public environment JSON, You have to use UTF-8 Encoding .

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

Talking about JSON.stringify Before , So let's go back ES6 Medium Escape sequences.

ES6 There are three escape:

1. Hex escape:16 Base number escape. What's more 2 Bit 16 Base number .

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

1. Unicode escape： What's more 4 Bit 16 Base number

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

1. Unicode code point escape： What's more 1 One or more 16 Base number

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

The last escape is in ES6 Introduced in .

unicode The character set is finally stored in a file or memory , Direct storage , Too much space . How can I save it ？ Use fixed 1 Bytes ,2 A byte or a variable length byte ？ So according to the different coding methods , Divided into UTF-8,UTF-16,UTF-32 And so on .

among UTF-8 It's a variable length encoding scheme , It USES 1-4 Bytes to store .UTF-16 Use 2 A or 4 Bytes to store .

and UTF-32 It's using 4 Bytes to store . Of the three coding methods , Only UTF-8 Is compatible ASCII Of , That's why internationally UTF-8 The reason why coding is more common （ After all, computer technology is made by Westerners ）.

We know that Unicode In the encoding ,U+D800 To U+DFFF These characters are reserved for UTF-16 Use , If we input characters in this range , It can't be converted into UTF-8 Format .

This is the original JSON.stringify Possible problems .

stay ES10 in ,JSON.stringify For those that cannot be converted to UTF-8 The characters of , Return the corresponding code unit escape sequences.

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

JSON Be classified as ECMAScript Subset

Before ,JSON No ECMAScript Subset , As a result, some of them can be JSON Characters contained in , Can't be in ECMAScript In the literal quantity of , such as U+2028 and U+2029 ：

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

JSON.parse(json); // OK

After this change , We don't need to distinguish between them when we code JSON still ECMAScript 了 .

Function Of toString Method

stay ES10 in , If Function It can be done by ECMAScript The way the source code is expressed , be toString Will return the code of this function directly ：

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

If it's some native Methods , Like the bottom floor c perhaps c++ Implemented code , Then return directly [native code]:

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

The author of this article ：flydean Program those things Link to this article ：http://www.flydean.com/ecmascript-10/ In this paper, the source ：flydean The blog of Welcome to my official account. :「 Program those things 」 The most popular interpretation , The deepest dry goods , The most concise tutorial , There are so many tricks you don't know about waiting for you to discover ！