Découvrez les caractéristiques mineures ES2017

Quelles sont les meilleures fonctionnalités mineures de ES2017 et ce qui est sur la liste pour ES2018? Cette série en deux parties explore les dernières fonctionnalités d'ECMAScript. Cette partie explore des caractéristiques mineures comme Object.values ​​/ Object.entries et le remplissage de chaînes, où Partie 1 a couvert les caractéristiques majeures.

Vérifions avec ECMA International, Comité Technique 39 ! Il se trouve que le 6 dans ES6 ne représente pas le nombre d'années qu'il faut pour une version. Je blague! Comme ES6 / ES2015 a pris tellement de temps à sortir (6 ans, d'où mon jab), le comité a décidé de passer à une version annuelle en petits lots. Je suis un grand fan de cela et je pense que l'élan continue à bouger et à améliorer JavaScript. Quels cadeaux avons-nous obtenu pour ES2017 et ce qui est sur notre liste pour ES2018?

Vous pouvez en apprendre plus sur le processus TC39 des propositions de 2ality par Dr. Axel Rauschmayer : Le processus TC39 pour les fonctions ECMAScript .

ES2017

En janvier, lors de la réunion du TC39, le groupe s'interroge sur les propositions ECMAScript qui seraient les caractéristiques d'ES2017 (également renvoyé à ES8, qui devrait probablement être supprimé pour éviter toute confusion). Cette liste comprenait:

Principales caractéristiques

Caractéristiques mineures

Dans ce post, le deuxième dans une série en deux parties, nous allons couvrir les caractéristiques mineures énumérées ci-dessus. Vous pouvez lire le premier post pour couvrir les principales caractéristiques.

Object.values ​​/ Object.entries

Proposé par: Jordan Harband

Object.values ​​()

J'ai en fait bénéficié de l'ajout utile de Object.values ​​récemment en tirant des informations de lumière Philips Hue d'un observable. Il m'a permis de parcourir les valeurs de mes données car il renvoie un tableau des propriétés de l'objet.

 // land before Object.values ​​()
const lights = {{id: 1, on: vrai, couleur: 'blue'}, {id: 2, on: false, couleur: 'rouge'}}
this.lights = Object.keys (data) .map (clé => données [key])

// l'heure est maintenant appelée WITH Object.values ​​()
this.lights = Object.values ​​(données)

// les deux retournent
// [{ id: 1, on: true, color: 'blue'}, { id: 2, on: false, color: 'red' }]

Fantaisie ?, droite?

Object.entries {}

Cette méthode prend ce que Object.values ​​() fait un peu plus loin. En regardant un objet, une structure de données de paires clé-valeur, chacune de ces paires est une entrée. Lorsque vous appelez Object.entries (), il renvoie un tableau contenant un tableau pour chacune de ces entrées.

 Object.entries ({name: 'Toshmagosh', age: 12})
// [[ "name", "Toshmagosh" ][ "age", 12 ]] 

C'est vraiment très simple, mais si vous voulez en savoir plus, JavaScript.info a un bon aperçu.

Rembourrage de cordes

Proposé par: Jordan Harband, Rick Waldron

Je ne pensais pas que j'allais avoir à le dire à nouveau, mais à gauche. Oui, la débâcle gauche de left pad de 2016 a suffisamment attiré l'attention de la communauté JavaScript pour que TC39 ajoute un remplissage de chaîne. Pour être juste cependant, il était temps pour JavaScript d'avoir des méthodes natives pour gérer les chaînes. ✨ Bienvenue padStart / padEnd à la famille, qui n'était pour le moment qu'un solitaire String.prototype.trim (est. ES5)!

Vous êtes tous des gens intelligents, donc vous pouvez probablement deviner ce que chacune de ces méthodes faire. Donc, je vais juste vous montrer quelques exemples au lieu d'utiliser mes mots.

 // padStart ajoute un remplissage jusqu'à ce que la chaîne atteigne la longueur prévue
'chiots'. padStart (22)
// "chiots"

// ou fournir un remplisseur au lieu d'espaces vides
'nachos'.padStart (11,' yum ')
// "yumyunachos"

// padEnd fonctionne de la même façon mais ajoute à la fin de la chaîne
'Carlos Santana'.padEnd (30,' - ^ ')
// "Carlos Santana - * - * - ^ *"

// Finesse Emoji
'????'.padEnd (8)
// "????" // pas de pad? yup, parce que la longueur === 8, emoji vous si drôle 

Pour examiner cela, les deux méthodes prennent un paramètre entier qui leur dit combien de temps la longueur finale de la chaîne, y compris le remplissage, devrait être. Si vous passez un nombre plus court ou égal à la longueur d'origine de la chaîne, rien ne changera. Bravo, en gaspillant ton temps (je plaisante ?). Vous pouvez également passer une chaîne et padStart / padEnd ajoutera de façon répétée chaque élément de cette chaîne au début ou à la fin de la chaîne d'origine jusqu'à ce que la longueur corresponde au paramètre de longueur transmise. Comme vous pouvez le voir dans mon exemple ci-dessus, puisque je voulais une longueur de 11, padStart a ajouté "yum" puis le "yu" et s'est arrêté. Les Emoji sont très importants, donc je voulais vous rappeler leurs longueurs de corde difficiles, plus d'informations dans ce blog très pratique .

Les développeurs vont, plus que probablement, profiter de ces méthodes qui leur permettront également de supprimer les bibliothèques qu'ils utilisaient pour accomplir une manipulation de chaînes. Il y a plus de méthodes dans le pipeline: trimStart / trimEnd est actuellement à l'étape 2 (sur les 4 étapes, voici le processus de décomposition à nouveau ??). Cela nous permettra de réduire ou de supprimer les début et fin des chaînes. Fait amusant: cette proposition a commencé avec trimLeft et trimRight mais a été mise à jour avec trimStart et trimEnd pour rester cohérent avec padStart et padEnd. Oui, la cohérence! Il aide également avec toute confusion si une langue est lue de droite à gauche ou de gauche à droite.

Object.getOwnPropertyDescriptors ()

Proposé par: Jordan Harband & Andrea Giammarchi [19659006] Ceci est la version plurielle de Object.getOwnPropertyDescriptor qui renvoie un descripteur de la propriété directement sur un objet, c'est-à-dire pas sur sa chaîne prototype

 let popcorn = {action: 'pop', beurre : vrai }
let popcornAction = Object.getOwnPropertyDescriptor (pop-corn, 'action')

// popcornAction est {
// valeur: "pop",
// writable: true,
// enumerable: true,
// writable: true
//} 

Donc, en utilisant la version plurielle, vous êtes capable de capturer tous les descripteurs de propriété non hérités (ou propres) d'un objet. En utilisant le délicieux exemple ci-dessus:

 let popcorn = {action: 'pop', beurre: vrai}
laissez popcornProperties = Object.getOwnPropertyDescriptors (popcorn)

// popcornProperties est {
//   action: {
// valeur: "pop",
// writable: true,
// enumerable: true,
// writable: true
//},
//   beurre: {
// valeur: true,
// writable: true,
// enumerable: true,
// writable: true
//}
//} 

Pourquoi avons-nous besoin de ces méthodes? Eh bien le proposant, Jordan Harband, le met bien ici:

Il n'y a pas une seule méthode dans ECMAScript capable de simplifier une copie correcte entre deux objets. En ces jours plus que jamais, où la programmation fonctionnelle et les objets immuables sont des parties essentielles d'applications complexes, chaque framework ou bibliothèque est en train de mettre en œuvre son propre langage pour copier correctement les propriétés entre des objets composés ou des prototypes.

– Jordan Harband

Avec cet ajout, vous pouvez maintenant utiliser getPrototypeOf et getOwnPropertyDescriptors avec objectCreate pour copier un objet et lui donner facilement les mêmes descripteurs de prototype et de propriété. Auparavant, cela se faisait le plus souvent en utilisant Object.assign, qui capturait les propriétés et les symboles d'un objet à la place des descripteurs. Cette approche a laissé le risque de se défaire des accesseurs possibles

 
 // juste pour vous donner une idée 
 const toshmagosh = {
 cuteLevel: 11, 
 Race: 'Blue Pomeranian' , 
 treatTime: traiter => {
 console.log ( Voulez-vous un $ {traiter}? ) 
} 
} 
 const newPuppy = Object.create (
 Object.getPrototypeOf (toshmagosh), 
 Objet.getOwnPropertyDescriptors (toshmagosh) 
); 
 // nouveauPuppy 
 // {cuteLevel: 11, Race: "Blue Pomeranian", treatTime: ƒ} 

Appréciation Pause

Maintenant, il y a beaucoup de gens formidables qui sont et ont été sur TC39, je voudrais les remercier tous pour leur travail. Faire cette liste a aussi mis le nom de quelqu'un par écrit plusieurs fois: Jordan Harband . Donc, je voulais juste prendre une petite pause pour ???? Jordan, qui est actuellement sur une solide 1,325 jour GitHub contributions streak à compter du 1er décembre 2017. Merci pour tout ce que vous faites pour JavaScript, Jordan

Commandes de fuite

Proposé par: Jeff Morrison

Je dois admettre que je pense que les virgules traînantes semblent super molles et je n'ai jamais été un grand fan.

[
'vraiment?',
'dois-tu?',
'yuck ?',
]

Cela étant dit, je comprends. J'ai souvent eu l'occasion d'ajouter un élément à un tableau, une paire de valeurs clés à un objet, ou de supprimer un élément et de devoir supprimer ou ajouter une virgule. Je suis un avec le concept de minimiser le nombre de frappes que vous devez utiliser. keysleft.com dit que je n'ai que 213 407 968 ​​et que je viens de passer à travers 117 dans cette seule phrase! J'ai également entendu l'argument pour les avantages que cela ajoutera à la vérification de vos diffs git puisque vous auriez seulement besoin d'éditer une ligne en ajoutant des paramètres de fonction, des éléments de tableau, etc. TBTH Je vais probablement prendre cette convention à partir de maintenant. D'accord, TC39? Vous gagnez! ?

Ce qui est à venir en 2018

Il y a une impressionnante table de propositions emoji-chargées et à quelles étapes elles se trouvent ici . Vous pouvez également voir les propositions finies dont une qui est déjà prête pour la publication de 2018!

Dr. Axel est là pour vous tenir au courant des événements ES2018: http://2ality.com/2017/02/ecmascript-2018.html .

D'habitude, à ce stade nous examinons les propositions de la phase 4, qui sont des propositions qui seront certainement ajoutées dans la prochaine version, et les propositions de la phase 3, qui sont des propositions qui ont de bonnes chances d'être incluses dans la prochaine version

. 4-ers sont:

• Template Literal Revision proposé par Tim Disney. Actuellement, la séquence d'échappement dans les littéraux de gabarit est problématique pour l'intégration de langages tels que les langages spécifiques au domaine. Cette proposition supprimera la restriction sur les séquences d'échappement. Pour en savoir plus cliquez ici ?.

• s (dotAll) pour les expressions régulières de Mathias Bynens. Cette proposition est tout à propos d'emoji! ? OK, pas entièrement, mais il introduit le drapeau / s dans les expressions régulières pour compenser les lacunes du point (.) Comme ne pas correspondre avec un caractère non-BMP tel que emoji). Il y a autre chose à faire, alors jetez un oeil à la proposition de Mathias

La liste des étapes 3-ers est un peu plus longue donc je vais vous donner ce lien utile pour voir le table et une image en bas. C'est gentil, c'est ?.

Lire la partie 1

Comme mentionné ci-dessus, ceci est le deuxième article d'une série en deux parties. Si vous n'avez pas vu la première partie, c'est là que nous avons couvert les principales caractéristiques que nous avons énumérées plus tôt. Vous pouvez vérifier ici .