ES2019 guide

ECMAScript is the standard on which JavaScript is based, and is often abbreviated as ES. Explore everything about ECMAScript and the features added in ES2019

ESNext is a name that always indicates the next version of JavaScript.

The current ECMAScript version isES2018. It was released in June 2018.

Historically, the JavaScript version has been standardized in the summer, so we can look forward toECMAScript 2019 to be released in summer 2019.

So at the time of writing, ES2018 has been released, andESNext is ES2019

The proposal of the ECMAScript standard is carried out in stages. Stages 1-3 are incubators for new functions, and the functions that reach stage 4 will be finalized as part of the new standard.

At the time of writing, we have many featuresStage 4. I will introduce them in this section. The latest versions of major browsers should have implemented most of them.

  • Array.prototype.{flat,flatMap}
  • Optional capture binding
  • Object.fromEntries()
  • String.prototype.{trimStart,trimEnd}
  • Symbol.prototype.description
  • JSON improvements
  • Well formattedJSON.stringify()
  • Function.prototype.toString()

Some of these changes are mainly for internal use, but it's also good to know what's going on.

There are other features in Phase 3, which may be upgraded to Phase 4 in the next few months, you can check them in the following GitHub repository:https://github.com/tc39/proposals.

Array.prototype.{flat,flatMap}

flat()Is a new array instance method that can create a one-dimensional array from a multi-dimensional array.

example:

['Dog', ['Sheep', 'Wolf']].flat()
//[ 'Dog', 'Sheep', 'Wolf' ]

By default, it only "flattens" to one level, but you can add a parameter to set the number of levels to which you want the array to be flattened. Set asInfinityWith unlimited levels:

['Dog', ['Sheep', ['Wolf']]].flat()
//[ 'Dog', 'Sheep', [ 'Wolf' ] ]

['Dog', ['Sheep', ['Wolf']]].flat(2)
//[ 'Dog', 'Sheep', 'Wolf' ]

['Dog', ['Sheep', ['Wolf']]].flat(Infinity)
//[ 'Dog', 'Sheep', 'Wolf' ]

If you are familiar with JavaScriptmap()The array method, you know that you can use it to perform a function on each element of the array.

flatMap()Is a new Array instance method that combinesflat()withmap(). This function is useful when calling a function that returns an array in the map() callback, but you want the array to be flat:

['My dog', 'is awesome'].map(words => words.split(' '))
//[ [ 'My', 'dog' ], [ 'is', 'awesome' ] ]

['My dog', 'is awesome'].flatMap(words => words.split(' '))
//[ 'My', 'dog', 'is', 'awesome' ]

Optional capture binding

Sometimes we don't need to bind parameters to the catch block of try/catch.

We had to do before:

try {
  //...
} catch (e) {
  //handle error
}

Even if we never have to useeAnalysis error. We can simply ignore it for now:

try {
  //...
} catch {
  //handle error
}

Object.fromEntries()

Object has aentries()Method becauseES2017.

It returns an array containing all the properties of the object itself, as[key, value]Correct:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

ES2019 introduces newObject.fromEntries()Method, you can create a new object from the following property array:

const person = { name: 'Fred', age: 87 }
const entries = Object.entries(person)
const newPerson = Object.fromEntries(entries)

person !== newPerson //true

String.prototype.{trimStart,trimEnd}

This feature has been part of v8/Chrome for nearly a year, and it will be standardized in ES2019.

trimStart()

Return a new string with blanks removed from the beginning of the original string

'Testing'.trimStart() //'Testing'
' Testing'.trimStart() //'Testing'
' Testing '.trimStart() //'Testing '
'Testing '.trimStart() //'Testing'

trimEnd()

Returns a new string with blanks removed from the end of the original string

'Testing'.trimEnd() //'Testing'
' Testing'.trimEnd() //' Testing'
' Testing '.trimEnd() //' Testing'
'Testing '.trimEnd() //'Testing'

Symbol.prototype.description

Now you can retrieveSymbolBy visiting itsdescriptionAttributes without having to usetoString()method:

const testSymbol = Symbol('Test')
testSymbol.description // 'Test'

JSON improvements

Before this change, the line separator (\u2028) and paragraph separator (\u2029) symbols were not allowed to be parsed asJSON format.

useJSON.parse(), These characters causeSyntaxErrorBut now, they can be parsed correctly according to the definition of the JSON standard.

Well formattedJSON.stringify()

repairJSON.stringify()Output when processing proxy UTF-8 code points (U + D800 to U + DFFF).

Before making this changeJSON.stringify()Will return malformed Unicode characters (".").

Now, those alternate code points can be safely represented as strings using the following commandJSON.stringify()And useJSON.parse().

Function.prototype.toString()

Functions always have an instance method calledtoString()It returns a string containing the function code.

ES2019 introduced changes to the return value to avoid stripping comments and other characters (such as spaces) to accurately represent the defined function.

If before we had:

function /* this is bar */ bar () {}

The behavior is like this:

bar.toString() //'function bar() {}

The new behavior now is:

bar.toString(); // 'function /* this is bar */ bar () {}'

Download mine for freeJavaScript beginner's manual


More js tutorials: