ES10 est sorti en juin 2019 et comprend plusieurs nouvelles fonctionnalités et améliorations du langage JavaScript.


Array.prototype.flat()

La méthode Array.prototype.flat() est une méthode de l’objet Array qui permet d’aplatir un tableau multidimensionnel en un tableau à une dimension. Elle prend en option un argument qui indique la profondeur à laquelle le tableau doit être aplati. Si aucun argument n’est fourni, le tableau sera aplati jusqu’à sa profondeur la plus profonde.

const array = [1, 2, [3, 4, [5, 6]]];

console.log(array.flat()); // [1, 2, 3, 4, [5, 6]]
console.log(array.flat(2)); // [1, 2, 3, 4, 5, 6]

Dans cet exemple, le tableau array est initialement un tableau à trois dimensions. Lorsque nous appelons la méthode flat() sans argument, le tableau est aplati jusqu’à la deuxième dimension, ce qui donne un tableau à deux dimensions. Lorsque nous appelons la méthode flat(2), le tableau est aplati jusqu’à la profondeur spécifiée, ce qui donne un tableau à une dimension.


Array.prototype.flatMap()

La méthode Array.prototype.flatMap() est une méthode de l’objet Array qui applique une fonction à chaque élément du tableau, puis « aplatit » le résultat en un tableau à une dimension. Elle est similaire à la méthode Array.prototype.map(), qui applique une fonction à chaque élément du tableau et retourne un tableau de résultats, mais flatMap() aplatit également le résultat final.

const array = [1, 2, 3, 4];

const result = array.flatMap(x => [x, x * 2]);

console.log(result); // [1, 2, 2, 4, 3, 6, 4, 8]

Dans cet exemple, nous utilisons la méthode flatMap() pour appliquer une fonction à chaque élément du tableau array. La fonction retourne un tableau avec deux éléments pour chaque élément du tableau d’origine : l’élément lui-même et son double. Le résultat final est un tableau à une dimension avec les éléments du tableau d’origine et leurs doubles.


Object.fromEntries()

La méthode Object.fromEntries() est une méthode de l’objet Object en JavaScript qui permet de créer un objet à partir d’un tableau de paires clé-valeur. Elle est utile lorsque vous avez un tableau de données structurées sous forme de paires clé-valeur et que vous souhaitez les transformer en objet.

const entries = [['name', 'John'], ['age', 30]];
const object = Object.fromEntries(entries);

console.log(object); // {name: 'John', age: 30}

Dans cet exemple, nous créons un tableau entries avec des paires clé-valeur sous forme de tableaux. Nous utilisons ensuite la méthode fromEntries() pour créer un objet à partir de ce tableau. Le résultat est un objet avec les propriétés name et age qui ont les valeurs correspondantes.


String.prototype.trimStart() & String.prototype.trimEnd()

Les méthodes String.prototype.trimStart() et String.prototype.trimEnd() sont des méthodes de l’objet String en JavaScript qui permettent de supprimer les espaces vides en début et en fin de chaîne de caractères, respectivement. Elles sont utiles lorsque vous souhaitez nettoyer une chaîne de caractères en enlevant les espaces inutiles avant ou après le texte.

const string = '   Hello, World!   ';

console.log(string.trimStart()); // 'Hello, World!   '
console.log(string.trimEnd()); // '   Hello, World!'

Dans cet exemple, nous avons une chaîne de caractères avec des espaces vides en début et en fin. Lorsque nous appelons la méthode trimStart(), les espaces vides en début de chaîne sont supprimés, tandis que lorsque nous appelons la méthode trimEnd(), les espaces vides en fin de chaîne sont supprimés.

Ces deux méthodes viennent remplacer les méthodes trimRight() et trimLeft() implémentées mais non standards.


Array.prototype.sort

La méthode Array.prototype.sort() de l’objet Array a été améliorée avec la monture ES10 pour prendre en compte les valeurs undefined lors du tri des tableaux. Dans les versions antérieures de JavaScript, les valeurs undefined étaient ignorées lors du tri et placées à la fin du tableau.

const array1 = [1, 2, undefined, 3];
const array2 = [1, 2, undefined, 3];

array1.sort();
array2.sort((a, b) => a - b);

console.log(array1); // [1, 2, 3, undefined]
console.log(array2); // [1, 2, 3, undefined]

Dans cet exemple, nous avons deux tableaux array1 et array2 avec une valeur undefined. Lorsque nous appelons la méthode sort() sur array1 sans fonction de comparaison, le tableau est trié en fonction de leur valeur de code Unicode comme dans les versions antérieures de JavaScript. La valeur undefined est placée à la fin du tableau. Lorsque nous appelons la méthode sort() sur array2 avec une fonction de comparaison qui compare les valeurs numériques, le tableau est trié dans l’ordre croissant comme attendu.


for-in

La boucle for-in est utilisée pour itérer sur les propriétés d’un objet. En mode strict, certaines règles sont imposées pour éviter certains comportements potentiellement dangereux ou indésirables.

En version 10.0 du standard ECMAScript, une modification a été apportée au comportement de la boucle for-in en mode strict pour éviter que les propriétés héritées d’un objet soient incluses dans l’itération. Avant ES10, les propriétés héritées étaient incluses dans l’itération, ce qui pouvait entraîner des comportements inattendus ou non désirés.

"use strict";

const object1 = {a: 1, b: 2};
const object2 = Object.create(object1);
object2.c = 3;

for (const key in object2) {
  console.log(key);
}

// Avant ES10 : 'a', 'b', 'c'
// Après ES10 : 'c'

Dans cet exemple, nous avons deux objets object1 et object2. object2 hérite de object1. Lorsque nous utilisons la boucle for-in pour itérer sur les propriétés de object2, avant ES10, les propriétés a et b héritées sont incluses dans l’itération en plus de la propriété c définie sur object2. Après ES10, seule la propriété c est incluse dans l’itération.

Il est recommandé d’utiliser la boucle for-in en mode strict lorsque vous souhaitez être sûr que seules les propriétés définies sur l’objet en cours d’itération sont incluses. Cela peut être particulièrement utile lorsque vous travaillez avec des objets hérités ou des objets qui peuvent être modifiés par d’autres parties de votre code.


Pour poursuivre vos recherches, vous trouverez d’autres informations sur le site officiel !

Ce site est susceptible d'utiliser des cookies pour améliorer votre expérience utilisateur