6 petites mais importante fonctionnalité ES7 et ES8

Le développement de nouvelles fonctionnalités pour le langage JavaScript de base s’est vraiment amélioré au cours des cinq dernières années, en partie grâce aux cadres JavaScript qui repoussent les limites et prouvent à quel point une fonctionnalité donnée peut être importante. Jetons un coup d’oeil aux « petites » fonctionnalités qu’ES7 et ES8 nous ont apportées !

Object.entries

Object.entries nous permet d’obtenir les propriétés énumérables d’un objet au format tableau ([clé, valeur]) :

Object.entries({ 'a': 'A', 'b': 'B' }); // [["a","A"],["b","B"]]

// Avec une chaîne
Object.entries('david') // [["0","d"],["1","a"],["2","v"],["3","i"],["4","d"]]

Object.entries suit le même procédé qu’un for….in le ferez

Object.values

Object.keys a été très utile pour moi donc j’étais aussi heureux de voir ce que Object.values apporte :

Object.values({ 'a': 23, 'b': 19 }) // [23, 19]

// Objet de type tableau (ordre non préservé)
Object.values({ 80: 'eighty', 0: 1, 1: 'yes' }) // [1, 'yes', 'eighty']

// Chaîne
Object.values('davidwalsh') // ["d", "a", "v", "i", "d", "w", "a", "l", "s", "h"]

// Tableau
Object.values([1, 2, 3]) // [1, 2, 3]

Object.values prend plusieurs entrées de valeurs objets, tableaux ou encore des chaînes de caractères, etc.

String.prototype.padStart/padEnd

padStart et padEnd nous permettent de remplir une chaînes de caractères donnée avec n’importe quel texte de notre choix pour s’assurer qu’une chaîne correspond à une longueur donnée :

// padStart(desiredLength, textToPrepend)

// Pas de texte
''.padStart(10, 'Ah') // 'AhAhAhAhAh'

// Du texte
'def'.padStart(6, 'abc') // 'abcdef'

// N'utiliser que ce qui est long.
'5678'.padStart(7, '1234') // '1235678'

// padEnd(desiredLength, textToAppend)
'23'.padEnd(8, '0') // '23000000'

Une utilisation de padStart pourrait inclure l’ajout d’un indicatif régional au numéro de téléphone si l’entrée de l’utilisateur n’est pas de la bonne longueur. padEnd pourrait être utilisé pour préciser la décimale.

Array.prototype.includes

Array.prototype.includes est un peu comme indexOf mais retourne plutôt une valeur vraie ou fausse à la place de l’index de l’élément :

['a', 'b', 'c'].includes('a') // Vrai, pas 0 comme l'indexOf donnerait
['a', 'b', 'c'].includes('d') // Faux

indexOf a été utilisé au fil des ans pour détecter la présence d’éléments dans un tableau, mais l’index `0′ peut conduire à de faux négatifs s’il n’est pas codé correctement. Je suis heureux que JavaScript ait ajouté une fonction qui renvoie exactement ce dont nous avons besoin : une réponse positive ou négative !

Exponentiation

JavaScript a introduit une méthode abrégée d’exponentiation :

//  2 à la puissance 8
Math.pow(2, 8) // 256
//  ..devient
2 ** 8 // 256

Cette nouvelle syntaxe accomplit la même chose que Math.pow avec moins de code !

Trailing Commas

Sur les anciens navigateurs comme Internet Explorer 6, une simple virgule pouvait exploser complètement votre code JavaScript JavaScript s’adapte maintenant à la virgule supplémentaire :

let myObj = { a:'b', b: 'c', } // Pas d'erreur

let myArr = [1, 2, 3, ] // Pas d'erreur

[1, 2, 3,].length // 3
[1, 2, 3, , , ].length // 5

Le cas de la longueur du tableau est un cas à garder à l’esprit. ESLint a une règle d’accrochage des virgules que vous pouvez utiliser pour vous assurer que votre utilisation des virgules est cohérente.

···