Le guide ES2019

ECMAScript est le standard sur lequel JavaScript est basé, et il est souvent abrégé en ES. Découvrez tout sur ECMAScript et les fonctionnalités ajoutées dans ES2019

ESNext est un nom qui indique toujours la prochaine version de JavaScript.

La version actuelle d'ECMAScript estES2018. It was released in June 2018.

Historiquement, les éditions JavaScript ont été standardisées au cours de l'été, nous pouvons donc nous attendreECMAScript 2019 to be released in summer 2019.

Donc, au moment de la rédaction de cet article, ES2018 a été publié, etESNext est ES2019

Les propositions au standard ECMAScript sont organisées par étapes. Les étapes 1 à 3 sont un incubateur de nouvelles fonctionnalités, et les fonctionnalités atteignant l'étape 4 sont finalisées dans le cadre de la nouvelle norme.

Au moment de la rédaction de cet article, nous avons un certain nombre de fonctionnalités àStage 4. Je les présenterai dans cette section. Les dernières versions des principaux navigateurs devraient déjà implémenter la plupart de ceux-ci.

  • Array.prototype.{flat,flatMap}
  • Reliure catch facultative
  • Object.fromEntries()
  • String.prototype.{trimStart,trimEnd}
  • Symbol.prototype.description
  • Améliorations JSON
  • Bien forméJSON.stringify()
  • Function.prototype.toString()

Certains de ces changements sont principalement destinés à un usage interne, mais il est également bon de savoir ce qui se passe.

Il existe d'autres fonctionnalités à l'étape 3, qui pourraient être promues à l'étape 4 dans les prochains mois, et vous pouvez les vérifier sur ce référentiel GitHub:https://github.com/tc39/proposals.

Array.prototype.{flat,flatMap}

flat()est une nouvelle méthode d'instance de tableau qui peut créer un tableau unidimensionnel à partir d'un tableau multidimensionnel.

Exemple:

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

Par défaut, il ne «flatte» que jusqu'à un niveau, mais vous pouvez ajouter un paramètre pour définir le nombre de niveaux sur lesquels vous souhaitez aplanir le tableau. Réglez-le surInfinitypour avoir des niveaux illimités:

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

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

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

Si vous connaissez le JavaScriptmap()méthode d'un tableau, vous savez qu'en l'utilisant, vous pouvez exécuter une fonction sur chaque élément d'un tableau.

flatMap()est une nouvelle méthode d'instance Array qui combineflat()avecmap(). C'est utile lors de l'appel d'une fonction qui renvoie un tableau dans le rappel map (), mais vous voulez que votre tableau résultant soit plat:

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

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

Reliure catch facultative

Parfois, nous n'avons pas besoin d'avoir un paramètre lié au bloc catch d'un try / catch.

Nous devions auparavant faire:

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

Même si nous n'avons jamais eu à utiliserepour analyser l'erreur. Nous pouvons maintenant simplement l'omettre:

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

Object.fromEntries()

Les objets ont unentries()méthode, puisqueES2017.

Il renvoie un tableau contenant toutes les propriétés propres à l'objet, sous la forme d'un tableau de[key, value]paires:

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

ES2019 présente un nouveauObject.fromEntries()méthode, qui peut créer un nouvel objet à partir d'un tel tableau de propriétés:

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

person !== newPerson //true

String.prototype.{trimStart,trimEnd}

Cette fonctionnalité fait partie de la v8 / Chrome depuis près d'un an maintenant, et elle sera normalisée dans ES2019.

trimStart()

Renvoie une nouvelle chaîne avec un espace blanc supprimé à partir du début de la chaîne d'origine

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

trimEnd()

Renvoie une nouvelle chaîne avec un espace blanc supprimé à la fin de la chaîne d'origine

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

Symbol.prototype.description

Vous pouvez maintenant récupérer la description d'unsymboleen accédant à sondescriptionpropriété au lieu d'avoir à utiliser latoString()méthode:

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

Améliorations JSON

Avant cette modification, les symboles de séparateur de ligne (\ u2028) et de séparateur de paragraphe (\ u2029) n'étaient pas autorisés dans les chaînes analysées commeJSON.

UtilisantJSON.parse(), ces personnages ont abouti à unSyntaxErrormais maintenant ils analysent correctement, comme défini par la norme JSON.

Bien forméJSON.stringify()

Corrige leJSON.stringify()sortie lorsqu'il traite les points de code UTF-8 de substitution (U + D800 à U + DFFF).

Avant ce changement appelantJSON.stringify()renverrait un caractère Unicode mal formé (un «�»).

Maintenant, ces points de code de substitution peuvent être représentés en toute sécurité sous forme de chaînes à l'aide deJSON.stringify(), et reconvertis dans leur représentation originale en utilisantJSON.parse().

Function.prototype.toString()

Les fonctions ont toujours eu une méthode d'instance appeléetoString()qui renvoient une chaîne contenant le code de la fonction.

ES2019 a introduit une modification de la valeur de retour pour éviter de supprimer les commentaires et autres caractères tels que les espaces, représentant exactement la fonction telle qu'elle a été définie.

Si auparavant nous avions:

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

Le comportement était le suivant:

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

maintenant le nouveau comportement est:

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

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: