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 closed
ecosystem 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); // SyntaxErrorJSON.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 !