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.
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
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 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
}
}
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
}
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
} )
}
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
}
}
capture
Reliure capture
en bloc sans la transmettre argument
comme: try {
doQuelqueChoseFautMotier ()
} capture {
handleExecption (
}
capture
vue du dessus et celle que nous utilisions jusqu'à maintenant. Les parenthèses moins souvent utilisées sont maintenant facultatives! 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`
.
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