L'auteur du matériel, dont nous publions la traduction aujourd'hui, affirme que les nouvelles fonctionnalités JavaScript tombées dans la norme ES2019 sont déjà
officiellement disponibles dans les navigateurs Chrome, Firefox et Safari, ainsi que sur la plateforme Node.js. Si vous devez prendre en charge des navigateurs obsolètes, vous pouvez profiter des innovations en transposant le code JS à l'aide de
Babel . Nous examinons ici des exemples de certaines des nouvelles fonctionnalités de JS.
Object.fromEntries, méthode
Dans ES2017, la méthode
Object.entries est
Object.entries . Il convertit l'objet en un tableau. Par exemple, cela pourrait ressembler à ceci:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 } Object.entries(students)
Cette méthode est devenue un merveilleux ajout aux capacités de la langue. Le fait est qu'il a permis de traiter facilement les données d'objets en utilisant les nombreuses méthodes intégrées au prototype
Array . Parmi ces méthodes, on peut par exemple
map ,
filter ,
reduce . Mais pour reconvertir le tableau en objet, malheureusement, il n'y avait pas d'outils pratiques. Tout devait être fait manuellement, en utilisant une boucle:
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
La méthode
Object.fromEntries conçue pour se débarrasser de ces boucles. Il vous permet de résoudre le même problème avec une quantité de code beaucoup plus petite. Cela pourrait bien aider les développeurs à utiliser plus souvent les méthodes de tableau pour traiter les objets convertis en tableaux.
let students = { amelia: 20, beatrice: 22, cece: 20, deirdre: 19, eloise: 21 }
Il est important de noter que les tableaux et les objets ne sont pas en vain des structures de données différentes. Dans certains cas, la conversion de l'un à l'autre entraîne une perte de données. Dans l'exemple suivant, vous pouvez voir comment lors de la conversion d'un tableau en objet, les éléments du tableau qui s'avèrent être des clés en double de l'objet sont perdus.
let students = [ [ 'amelia', 22 ], [ 'beatrice', 22 ], [ 'eloise', 21], [ 'beatrice', 20 ] ] let studentObj = Object.fromEntries(students);
▍Support
- Chrome 75
- Firefox 67
- Safari 12.1
Array.prototype.flat, méthode
Les tableaux multidimensionnels sont des structures de données que les programmeurs rencontrent assez souvent. Surtout - lors du chargement de certaines données. Dans le même temps, la réduction de la dimension de la matrice a toujours été une tâche importante. Il était toujours possible de résoudre ce problème, mais le code de sa solution ne pouvait pas être qualifié de très attrayant.
Prenons l'exemple suivant. Ici, à la suite du traitement d'un tableau d'objets à l'aide de la fonction de
map , nous avons un tableau multidimensionnel. Nous voulons le rendre plus "plat".
let courses = [ { subject: "math", numberOfStudents: 3, waitlistStudents: 2, students: ['Janet', 'Martha', 'Bob', ['Phil', 'Candace']] }, { subject: "english", numberOfStudents: 2, students: ['Wilson', 'Taylor'] }, { subject: "history", numberOfStudents: 4, students: ['Edith', 'Jacob', 'Peter', 'Betty'] } ] let courseStudents = courses.map(course => course.students)
Nous avons maintenant à notre disposition la méthode
Array.prototype.flat , qui prend un argument facultatif qui indique à quel niveau les éléments du tableau doivent être «élevés».
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let flattenOneLevel = courseStudents.flat(1) console.log(flattenOneLevel)
Veuillez noter que si vous ne passez pas d'arguments à cette méthode, elle élèvera les éléments du tableau d'un niveau. Ceci est très important, car dans notre cas, nous devons transformer le tableau en une structure de données complètement plate. Voici ce qui se passe lors de l'utilisation de cette méthode sans paramètres:
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let defaultFlattened = courseStudents.flat() console.log(defaultFlattened)
La justification d'un tel dispositif de cette méthode peut être trouvée dans le fait que, par défaut, il ne cherche pas à transformer un tableau en unidimensionnel, nécessitant des instructions spécifiques pour convertir le tableau. Si vous devez convertir un tableau dont les paramètres exacts sont inconnus en un tableau unidimensionnel, vous pouvez passer la valeur
Infinity à la méthode
flat .
let courseStudents = [ [ 'Janet', 'Martha', 'Bob', [ 'Phil', 'Candace' ] ], [ 'Wilson', 'Taylor' ], [ 'Edith', 'Jacob', 'Peter', 'Betty' ] ] let alwaysFlattened = courseStudents.flat(Infinity) console.log(alwaysFlattened)
Comme d'habitude, ces opérations doivent être utilisées avec prudence. Cette approche ne peut probablement pas être considérée comme un bon choix dans les cas où la profondeur de la matrice traitée est vraiment inconnue.
▍Support
- Chrome 75
- Firefox 67
- Safari 12
Array.prototype.flatMap, méthode
Avec la méthode
flat , nous avons maintenant à notre disposition une nouvelle méthode combinée -
Array.prototype.flatMap . Ci-dessus, nous avons en fait déjà vu un exemple d'une situation dans laquelle cette méthode peut être utile, mais regardons un autre exemple.
Supposons que nous soyons confrontés à la tâche d'insérer certains éléments dans un tableau. Comment pourrions-nous le résoudre avant l'avènement des nouvelles fonctionnalités JS? Par exemple, comme ceci:
let grades = [78, 62, 80, 64] let curved = grades.map(grade => [grade, grade + 7])
Maintenant que nous avons la méthode
Array.prototype.flat , ce code peut être amélioré:
let grades = [78, 62, 80, 64] let flatMapped = grades.map(grade => [grade, grade + 7]).flat()
Le problème que nous résolvons ici est basé sur un modèle relativement populaire (en particulier la programmation fonctionnelle). Par conséquent, à quel point nous pouvons le résoudre en utilisant la méthode
flatMap ne peut que nous réjouir:
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, grade + 7]);
Rappelez-vous que, par défaut, la méthode
Array.prototype.flat fonctionne comme si une unité lui avait été transmise. La méthode
flatMap se comporte exactement de la même manière, c'est-à-dire qu'elle «soulève» les éléments du tableau d'un seul niveau. C'est le résultat d'une combinaison de méthodes
map et
flat .
let grades = [78, 62, 80, 64] let flatMapped = grades.flatMap(grade => [grade, [grade + 7]]);
▍Support
- Chrome 75
- Firefox 67
- Safari 12
Méthodes String.prototype.trimStart et String.prototype.trimEnd
Une autre nouvelle fonctionnalité intéressante d'ES2019 est les alias qui donnent à certaines méthodes de chaîne des noms plus significatifs. Auparavant, nous
String.prototype.trimLeft méthodes
String.prototype.trimRight et
String.prototype.trimLeft :
let message = " Welcome to CS 101 " message.trimRight()
Les méthodes sont merveilleuses, mais ce qui est bien, c'est qu'on leur a donné des noms plus adaptés à leur objectif. Et leur objectif est de supprimer les espaces de début et de fin des chaînes.
let message = " Welcome to CS 101 " message.trimEnd()
▍Support
- Chrome 75
- Firefox 67
- Safari 12
Argument de bloc de capture facultatif
Une autre fonctionnalité intéressante d'ES2019 est que l'argument dans
try-catch blocs
try-catch est devenu facultatif. Auparavant, tous
catch blocs
catch devaient passer un objet d'exception en tant que paramètre. L'argument devait être transmis pour
catch même s'il n'était pas utilisé.
try { let parsed = JSON.parse(obj) } catch(e) {
Ce n'est plus le cas. Si l'objet d'exception n'est pas utilisé dans le
catch , rien ne doit être transféré vers ce bloc.
try { let parsed = JSON.parse(obj) } catch { console.log("error") }
C'est une grande opportunité, qui sera utile dans les cas où le programmeur sait à l'avance quel type de situation d'urgence conduira à entrer dans le
catch correspondant.
▍Support
- Chrome 75
- Firefox 67
- Safari 12
Modifications apportées à la méthode Function.prototype.toString
La norme ES2019 a apporté des changements au fonctionnement de la
toString fonction
toString . Auparavant, il avait légèrement déformé l'apparence du code de sortie:
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
Maintenant, cette méthode reflète la représentation réelle du code source des fonctions.
function greeting() { const name = 'CSS Tricks' console.log(`hello from ${name}`) } greeting.toString()
▍Support
Résumé
Ici, nous avons examiné des exemples d'utilisation de quelques-unes des nouvelles fonctionnalités JavaScript. Si vous êtes intéressé par les innovations JS, jetez un œil à
ce référentiel et à
ce tableau.
Chers lecteurs! Avez-vous rencontré des situations dans lesquelles les nouvelles fonctionnalités de JS simplifient considérablement la résolution des problèmes?
