Fermer

juin 10, 2019

Quoi de neuf en JavaScript?


Chaque année, de nombreuses fonctionnalités intéressantes et intéressantes sont ajoutées aux spécifications JavaScript. Nous allons examiner de manière exhaustive les nouvelles fonctionnalités de JavaScript et la prise en charge de leur navigateur respectif.

Le premier navigateur graphique populaire est sorti en 1993. Brenden Eich a écrit la première version de JavaScript (alors appelé LiveScript) en seulement 10 jours en 1995 pour Netscape Communications. Microsoft a inversé l’implémentation de JavaScript et construit JScript pour Internet Explorer 3. L’implémentation de JavaScript et de JScript étant très différente, les développeurs ont eu du mal à créer des sites Web pour les différents navigateurs. Cela constituait un obstacle à l'adoption généralisée de JavaScript sur le Web.

Netscape a soumis JavaScript au comité Ecma International pour normaliser les différentes fonctionnalités du langage pour différents éditeurs de navigateurs. La première édition officielle de la spécification de langue a été publiée en 1997 et est connue sous le nom de ECMAScript. Depuis lors, de nombreuses fonctionnalités ont été ajoutées en JavaScript pour concurrencer d'autres langages de programmation. Les éditeurs de navigateurs ont considérablement amélioré les performances du moteur JavaScript pour aider à alimenter les applications Web modernes.

L'utilisation de JavaScript ne se limite pas aux applications Web. Il est largement utilisé dans la création d’outils de ligne de commande et d’outils côté serveur utilisant Node.js, d’applications de bureau utilisant Electron, des applications mobiles multiplates-formes utilisant React Native et des dispositifs IOT économiques. JavaScript est l’un des langages les plus appréciés et les plus populaires de la communauté des développeurs.

Chaque année, de nombreuses fonctionnalités intéressantes et intéressantes sont ajoutées aux spécifications JavaScript. Dans cet article, nous examinerons les nouvelles fonctionnalités ajoutées à JavaScript et la prise en charge de leur navigateur respectif. Voici une liste complète des fonctionnalités et des améliorations apportées pour améliorer les performances des applications réelles, comme annoncé dans Google I / O 2019 .

Améliorations des performances dans le monde réel

Analyse et analyse ; Compilation du code JavaScript

Le code JavaScript est analysé puis compilé par le moteur JavaScript pour générer un code machine optimisé. La vitesse d'analyse a été doublée depuis les versions 61 à 75 de Chrome, telle que mesurée sur les applications réelles.

 diagramme montrant les résultats de la vitesse d'analyse 2x

Lorsque le navigateur rencontre le code JavaScript, il bloque le principal thread et s’occupe du processus d’analyse, de compilation et d’interprétation de ce code. L’équipe V8 a réussi à extraire 40% du travail d’analyse et de compilation du thread principal. Ce travail est maintenant effectué dans un autre thread en parallèle. Cela améliorerait considérablement les performances de démarrage des applications Web.

Note latérale : Si vous souhaitez en savoir plus sur le processus interne d'analyse et de compilation, rendez-vous à ces liens .

Promises

Les promesses se sont multipliées par 11 entre Node.js version 7 et version 12, tandis que promise.all en particulier a été multiplié par 13 entre Chrome 54 et Chrome 75 .

Consommation de mémoire

La consommation de mémoire est réduite de 20% par rapport aux appareils Android Go exécutant des applications Web réelles.

Implémentation des fonctionnalités JavaScript annoncées dans Google I / O 2018 [19659018] Certaines fonctionnalités JavaScript ont été annoncées en 2018, mais elles n’étaient pas prises en charge par tous les navigateurs modernes. Ces fonctionnalités sont maintenant implémentées dans tous les navigateurs modernes et vous pouvez les utiliser dans vos applications sans utiliser de polyfill. Regardons rapidement ces caractéristiques:

Itérateurs et générateurs asynchrones

Un itérateur est essentiellement un pointeur permettant de parcourir les éléments d'une structure de données de manière séquentielle. Pour l'instant, les structures de données itérables sont les tableaux, les chaînes, les cartes et les ensembles. Nous pouvons implémenter l'itération sur ces structures de données en utilisant la clé Symbol.iterator . La méthode next définie dans le protocole itérateur renvoie un objet ayant deux propriétés:

value – Valeur du prochain élément de la séquence
done – Il indique la fin de la séquence et renvoie true pour la dernière valeur

On peut utiliser de manière asynchrone Iterators and Generators pour la lecture de flux de données en cours. Voyons cela à l'aide d'un exemple:

 async   function   getResponseSize   ( url )   {
     const  de  ] =   wait   fetch  ( url ) 
     const  reader  =  réponse .  corps .  getReader  () 
     let  total  =   0 
     alors que   ( true )   {
         ] const   { done  value }   =   wait  lecteur .  lu  () 
         if   ( done )   retour  total
        total  + =  valeur .  longueur
    } 

} 

Cet exemple est tiré de de Google I / O 2018 . Ici, nous calculons le nombre total de morceaux dans un flux. Si vous êtes déjà familiarisé avec la syntaxe async-wait ce code vous semblera familier. Mais laissez-moi quand même mettre cela en mots pour rendre les choses plus claires. Le code après wait attend jusqu'à ce que la réponse de l'URL d'extraction soit reçue. Nous extrayons ensuite les données en morceaux et continuons d’ajouter la longueur du morceau dans la variable total . La boucle tandis que se poursuit jusqu'à la fin du flux. Cela demande beaucoup d'attendre manuellement chaque morceau, puis d'évaluer la fin du flux. Le nouveau JavaScript est moins bavard et semble beaucoup plus propre.

 async   function   getResponseSize   ( url )   {
     const  réponse  =   wait   fetch  ( url ) 
     soit  total  =   0 
     pour   à attendre  (1965).  const  morceau  de réponse  .  corps )   {
        total  + =  morceau .  longueur
    } 
     retour  total
} 

La boucle pour-attendre-de effectue le travail d'extraction des données à partir de morceaux et termine automatiquement le processus lorsque nous atteignons la fin du flux. Nous pouvons également utiliser la même syntaxe dans Node.js au lieu d'écrire des rappels pour les événements et et .

enfin dans Promises

. enfin dans des promesses. Le code à l'intérieur du bloc Enfin serait exécuté une fois que la promesse serait résolue ou rejetée. Regardons sa syntaxe:

 function   getData   ( url )   {
     fetch   ( url ) ].  then   ( response  = & [1959027] {
             // ... faisant des travaux sur le rappel de succès 
        } ) 
        .  catch   ( error   = &   {
             // ... occupé à attraper des erreurs 
        } ) 
        .  Enfin [19659027] (  ()   = & gt;   {
             // ... faire ce qui est commun, comme de cacher la toupie ou un popup, quel que soit le succès ou l'erreur 
        } ) 
} 

Le bloc enfin peut également être ajouté à la fonction async wait ainsi:

 async       getData   ( url )   {
     try   {
         const  response  =   wait [19659026] fetch  ( url ) 
         // ... effectuer des travaux sur le rappel de succès 
    }   capture   ( erreur )   ] {
         // ... occupé à attraper des erreurs 
    }   enfin   ()   {
         // ... faire des choses courantes comme cacher la toupie ou un popup quel que soit le succès ou l'erreur 
    } 
} 

Facultatif capture Reliure

Vous pouvez maintenant écrire capture en bloc sans la transmettre argument comme:

 try   {
     doQuelqueChoseFautMotier  () 
}   capture   {
     handleExecption  ( 
} 

Veuillez noter la différence entre la syntaxe de capture vue du dessus et celle que nous utilisions jusqu'à maintenant. Les parenthèses moins souvent utilisées sont maintenant facultatives!

Découpage de la chaîne uniquement du début ou de la fin

La fonction couramment utilisée pour le découpage des espaces blancs dans une chaîne est trim . Cependant, il peut arriver que nous supprimions les espaces blancs d'un seul bout début ou de la fin . Ceci est maintenant possible en utilisant les méthodes trimStart et trimEnd . Voyons cela en action à l'aide d'un exemple:

 const  str  =   `JavaScript génial` 
 str .  trimStart  19659032])   // `JavaScript génial` 
str .  trimEnd  ()   // `JavaScript génial` 

Opérateurs de propagation et de repos dans des objets

Nous avons utilisé l'impressionnant . et rest opérateurs dans Arrays, et la bonne nouvelle est que ces opérateurs sont désormais également pris en charge dans les objets.

 let  obj1  =   {
nom : "Ronald Weasley"
rôle : "étudiant"
maison : "Gryffondor"
école : "École de sorcellerie de Poudlard"
alias : "Ron"
baguette : "Saule, 14", queue de cheveux de licorne "
}
let obj2 = {
    Boggart : "Aragog"
patronus : "jack russell terrier"
MinistryOfMagic : false
orderOfThePhoenix : true
dumbledoresArmy : true
deathEater : false
bloodStatus : "sang-pur"
espèce : "humain"
}

let ronObj = { ... obj1 . . obj2 } // Création de copies complètes des objets `obj1` et` obj2` à l'aide de l'opérateur de propagation.

let { nom




Source link

juin 10, 2019