Fonctions asynchrones, objets améliorés et plus –

Jetons un coup d'œil aux mises à jour JavaScript les plus importantes fournies avec ES2017, et couvrons brièvement comment ce processus de mise à jour se déroule réellement.

Le processus de mise à jour

JavaScript (ECMAScript) est une norme en constante évolution par de nombreux fournisseurs sur plusieurs plates-formes. ES6 (ECMAScript 2015) était une grande version qui a pris six ans à finaliser. Un nouveau processus de publication annuel a été formulé pour simplifier le processus et ajouter rapidement de nouvelles fonctionnalités.

Le comité technique 39 (TC39), dont le nom est modeste, est composé de fournisseurs de navigateurs qui se réunissent pour pousser les propositions JavaScript selon une progression stricte. Etape 0: strawman –
Soumission initiale d'idées pour des caractéristiques ECMAScript nouvelles ou améliorées.

Etape 1: proposition –
Un document de proposition formel défendu par au moins un membre du TC39, qui comprend des exemples d'API, la sémantique du langage, des algorithmes, des obstacles potentiels, des polyfills et des démonstrations.

Étape 2: ébauche –
Une version initiale de la spécification de caractéristique. Deux implémentations expérimentales de la fonctionnalité sont requises, bien que l'on puisse être dans un transpiler tel que Babel.

Étape 3: candidat –
La spécification de la proposition est revue et les commentaires sont recueillis auprès des fournisseurs.

Étape 4: terminé –
La proposition est prête à être incluse dans ECMAScript. Une caractéristique ne devrait être considérée comme une norme qu'une fois qu'elle a atteint ce stade. Cependant, il peut prendre plus de temps à être livré dans les navigateurs et les runtimes tels que Node.js.

Si ES2015 était trop grand, ES2016 était volontairement minuscule pour prouver le processus de standardisation. Deux nouvelles fonctionnalités ont été ajoutées:

1. La méthode array .includes () qui renvoie true ou false lorsqu'une valeur est contenue dans un tableau, et
2. The a ** b ] exponentiation, qui est identique à Math.pow (a, b) .

Quoi de neuf dans ES2017

L'ensemble de fonctionnalités pour ES2017 (ou ES8 dans l'ancienne monnaie) est considéré comme le premier amendement approprié à la spécification ECMAScript. Il fournit les biens suivants …

Fonctions asynchrones

Contrairement à la plupart des langages, JavaScript est asynchrone par défaut. Les commandes qui peuvent prendre un certain temps n'arrêtent pas l'exécution. Cela inclut des opérations telles que demander une URL, lire un fichier ou mettre à jour une base de données. Une fonction de rappel doit être transmise, qui s'exécute lorsque le résultat de cette opération est connu

Cela peut conduire à un rappel de l'enfer lorsqu'une série de fonctions asynchrones imbriquées doit être exécutée dans l'ordre. Par exemple:

 function doSomething () {
  faireQuelque chose1 ((réponse1) => {
    Quelque chose2 (réponse1, (réponse2) => {
      faire quelque chose3 (réponse2, (réponse3) => {
        // etc...
      }
    });
  });
}

ES2015 (ES6) introduit Promises, qui fournit un moyen plus propre d'exprimer la même fonctionnalité. Une fois que vos fonctions ont été promis, elles pourraient être exécutées en utilisant:

 function doSomething () {
  faire quelque chose1 ()
  .then (doSomething2)
  .then (doSomething3)
}

Les fonctions asynchrones ES2017 se développent sur Promises pour rendre les appels asynchrones encore plus clairs:

 async function doSomething () {
  const
    response1 = attendez doSomething1 (),
    response2 = attend faire quelque chose2 (réponse1),
    response3 = wait doSomething3 (réponse2);
}

await fait apparaître chaque appel comme s'il était synchrone sans tenir le thread de traitement unique de JavaScript

Les fonctions asynchrones sont supportées dans tous les navigateurs modernes (IE et Opera Mini) et Node.js 7.6+. Ils vont changer la façon dont vous écrivez JavaScript, et un article entier pourrait être dédié aux callbacks, aux promesses et aux fonctions asynchrones. Heureusement, nous en avons un! Reportez-vous à Contrôle de flux en JavaScript moderne

Object.values ​​()

Object.values ​​() est un moyen rapide et plus déclaratif d'extraire un tableau de valeurs de paires nom-valeur dans un objet. Par exemple:

 const myObject = {
  a: 1,
  b: «Deux»,
  c: [3,3,3]
}

const values ​​= Object.values ​​(myObject);
// [1'Deux'[3,3,3]]

Vous n'avez plus jamais besoin d'écrire une boucle pour ... de ! Object.values ​​ est supporté nativement dans tous les navigateurs modernes (pas IE ou Opera Mini) et Node.js 7.0 +.

Object.entries ()

Object.entries () renvoie un tableau d'un objet contenant des paires nom-valeur. Chaque valeur du tableau renvoyé est un sous-tableau contenant le nom (index 0) et la valeur (index 1). Par exemple:

 const myObject = {
  a: 1,
  b: «Deux»,
  c: [3,3,3]
}

const entries = Object.entries (monObjet);
/ *
[
  [ 'a', 1 ],
  [ 'b', 'Two' ],
  ['c'[3,3,3]]
]
* /

Cela fournit un autre moyen d'itérer sur les propriétés d'un objet. Il peut également être utilisé pour définir une carte :

 const map = new Carte (Object.entries ({
  a: 1,
  b: 2,
  c: 3
}));

Object.values ​​ est supporté nativement dans la plupart des navigateurs modernes (mais pas IE, Opera Mini et iOS Safari) et Node.js 7.0 +.

Object.getOwnPropertyDescriptors ()

La méthode Object.getOwnPropertyDescriptors () renvoie un autre objet contenant tous les descripteurs de propriété ( .value .writable .get . set .configurable .enumerable ).

Les propriétés sont directement présentes sur un objet et non sur la chaîne prototype de l'objet. C'est similaire à Object.getOwnPropertyDescriptor (objet, propriété) – sauf que toutes les propriétés sont renvoyées, plutôt qu'une seule. Par exemple:

 const myObject = {
  prop1: 'bonjour',
  prop2: 'monde'
}

const descriptors = Object.getOwnPropertyDescriptors (myObject);

console.log (descriptors.prop1.writable); // vrai
console.log (descriptors.prop2.value); // 'monde'

padStart () et padEnd () String Padding

Le remplissage de chaînes a été controversé en JavaScript. La librairie populaire left pad a été tirée de npm après avoir attiré l'attention d'avocats représentant une application de messagerie instantanée du même nom. Malheureusement, il a été utilisé comme une dépendance dans des milliers de projets et Internet a éclaté. npm modifiait par la suite les procédures d'exploitation et left-pad n'était pas publié

Un remplissage de chaîne natif a été ajouté à ES2017, il n'est donc pas nécessaire d'utiliser un module tiers. .padStart () et .padEnd () ajoutent respectivement des caractères au début ou à la fin d'une chaîne, jusqu'à ce qu'ils atteignent la longueur désirée. Les deux acceptent une longueur minimale et une chaîne facultative 'fill' (l'espace est la valeur par défaut) en tant que paramètres. Exemples:

 'abc'.padStart (5); // 'abc'
'abc'.padStart (5,' - '); // '--abc'
'abc'.padStart (10,' 123 '); // '1231231abc'
'abc'.padStart (1); // 'abc'

'abc'.padEnd (5); // 'abc'
'abc'.padEnd (5,' - '); // 'abc--'
'abc'.padEnd (10,' 123 '); // 'abc1231231'
'abc'.padEnd (1); // 'abc'

.padStart () et .padEnd () sont pris en charge dans tous les navigateurs modernes (sauf IE) et Node.js 8.0 +.

Les virgules sont permises [19659003] Une petite mise à jour ES2017: les virgules de fin ne génèrent plus d'erreur de syntaxe dans les définitions d'objet, les déclarations de tableau, les listes de paramètres de fonction, etc.:

 // ES2017 est content!
const a = [1, 2, 3,];

const b = {
  a: 1,
  b: 2,
  c: 3,
}

la fonction c (un, deux, trois,) {};

Les virgules de fin sont activées dans tous les navigateurs et Node.js. Cependant, les virgules de fin dans les paramètres de la fonction ne sont pris en charge que dans Chrome 58+ et Firefox 52+ au moment de l'écriture.

SharedArrayBuffer et Atomics

L'objet SharedArrayBuffer est utilisé pour représenter une longueur fixe. tampon de données binaires brut pouvant être partagé entre les travailleurs Web. L'objet Atomics fournit un moyen prévisible de lire et d'écrire dans les emplacements de mémoire définis par SharedArrayBuffer .

Bien que les deux objets aient été implémentés dans Chrome et Firefox, ils ont été désactivés en janvier 2018 en réponse à la vulnérabilité Spectre de .

La spécification de langage ECMAScript 2017 complète est disponible sur le site Web ECMA International . Avez-vous faim pour plus? Les nouvelles fonctionnalités de dans ES2018 ont été annoncées!

Craig est un consultant Web indépendant au Royaume-Uni qui a construit sa première page pour IE2.0 en 1995. Depuis ce temps, il prône les normes, l'accessibilité et le meilleur … pratique les techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler