Chaîne de modèle
C'est l'une des caractéristiques de l'ES6 que j'aime beaucoup. Il reflète très intuitivement la relation entre les variables et les cordes. Dans ES5, si nous voulons ajouter des variables aux chaînes, nous devons utiliser la méthode d'écriture suivante:
animate (box, 'tradlate (-' + itemwidth * num + 'px, 0)', 1000, function () {box.style.transitionDuration = ''; box.style.transform = 'translate (-800px, 0)'; drapeau = true;});Maintenant, en utilisant des chaînes de modèle ES6, vous pouvez combiner directement les chaînes et les variables pour le rendre plus facile à comprendre.
animate (box, `tradlate (- $ {itemwidth * num} px, 0)`, 1000, function () {box.style.transitionDuration = ''; box.style.transform = `tradlate (- $ {itemwidth * (item.length-2)} px, 0)`; drap = true;});Est-ce très intuitif et pratique? D'après les deux exemples simples ci-dessus, il est évident que dans ES6, les cordes sont marquées de backticks (`` `), qui doivent être connues.
Il y a une autre fonctionnalité. La chaîne de modèle peut sortir une chaîne pliée, ce qui est impossible dans les chaînes ES5 traditionnelles. Il doit être utilisé (/ n) et ne peut pas être écrit pour entrer le retour du chariot lors de l'écriture. Cependant, dans le modèle de chaîne ES6, il peut être écrit directement pour entrer le retour du chariot, l'espace, puis la sortie directement lorsque la chaîne est sortie, ce qui est très pratique.
Laissez myString = `ABCDEFFFF FAS`; Console.log (MyString); / * OUTPUT ABCDEFFFF FAS * /
Extension des fonctions
1. Définir les valeurs par défaut pour la fonction
Dans l'extension de la fonction, une fonction est ajoutée pour définir des valeurs par défaut pour la fonction, ce qui peut être considéré comme très bon. Vous souvenez-vous de la façon dont nous définissons les valeurs par défaut pour les fonctions dans ES5?
Test de fonction (a, b, c) {var a = a || 10; var a = b || 15; var c = c || 20; console.log (a + b + c);}Ici, nous définissons la valeur par défaut pour réaliser notre effet attendu jusqu'à un jour, nous passons A = 0 in. Pour le moment, il est mal pour nous d'écrire de cette façon. Pour le programme, 0 est faux, donc A prendra la valeur par défaut de 10, n'ayant pas réussi à réaliser l'effet attendu. Mais ES6 nous fournit un très bon moyen de définir les valeurs par défaut. Le code ci-dessus peut être réécrit comme suit:
Test de fonction (a = 10, b = 15, c = 20) {console.log (a + b + c);}2. Fonction de flèche
Les étudiants qui comprennent le cofficcript doivent être clairs que le pouvoir de Cofficescript est sa fonction flèche omniprésente, qui est très agréable à écrire. Maintenant, ES6 a officiellement introduit la fonction Arrow, afin que notre programme puisse être simplifié, par exemple:
// La méthode d'écriture de ES5 var test = fonction (a, b) {return a + b;} // la fonction flèche de es6 var test2 = test (a, b) => a + b;Lorsque vous écrivez des carrousels, vous devez déplacer la souris vers les petits points suivants dans l'objet de réseau des petits points, afin que le graphique puisse se déplacer vers la bonne position. Dans ES5, nous devons ajouter des attributs à l'objet actuel, qui est plus lourd à écrire, et la méthode d'écriture est la suivante:
var lilist = document.QuerySelectorall ('li'); pour (var i = 0; i <lilist.length; i ++) {list [i] .index = i; lilist [i] .addeventListener ('MouseEnter', function () {console.log (this.index);}, false);}Cet attribut this.index est l'index de l'élément placé sur la souris actuelle, puis l'élément actuel est obtenu en fonction de cet index. Mais dans ES6, nous pouvons utiliser directement la fonction de flèche et le nouvellement introduit FindIndex dans le tableau pour trouver l'index de l'élément actif actuel. Le code est le suivant:
Selt Lilist = document.QuerySelectorall ('li'); Soit ArrayliList = array.form (lilist); for (var i = 0; i <lilist.length; i ++) {lilist [i] .index = i; lilist [i] .AddeventListener ('MouseEnter', function () {let thisIndex = arraylist.findindex ((n) => n == this);}, false);}CeIndex obtenu par le code ci-dessus est l'index placé sur la souris actuelle. Ici, je comprends le paramètre n dans la fonction flèche. Après avoir transmis le paramètre N, il traversera l'objet dans le tableau, afin de trouver l'objet égal à cela, puis de retourner son index. Array.from () est utilisé ici. Il s'agit d'une nouvelle méthode ajoutée au tableau dans ES6, qui peut convertir le tableau de classe en un tableau.
ES6 pour… de Loop
La boucle de code JS ci-dessus utilise pour, mais en fait, elle peut être remplacée par le pour… de la boucle dans ES6, ce qui rend l'écriture plus concise. Vous souvenez-vous du pour… en boucle en js. Cette boucle peut boucler les touches dans des paires de valeurs de clé, mais ne peut pas boucler les valeurs. L'émergence de… de… est de compenser ses lacunes. Les plages qui peuvent être utilisées par le FOR… de la boucle comprennent des tableaux, des structures définies et cartographiques, certains objets de type tableau (tels que les objets d'arguments, les objets Dom Nodelist), les objets générateurs et les chaînes. Nous pouvons donc utiliser cette boucle pour remplacer la boucle pour, mais ici, nous devons noter que si vous utilisez directement la boucle pour ... de la boucle, une erreur sera signalée sous Chrome49. Le responsable a confirmé qu'il s'agit d'un bug de Chrome49 et sera corrigé dans Chrome51 . Donc, quand j'écrivais, j'ai utilisé Array.from () pour convertir l'objet Nodelist en un tableau, afin que je puisse fonctionner en toute confiance. Le code est le suivant:
LET LILIST = Document.QuerySelectorall ('Li'); Soit ArrayliList = Array.Form (lilist); for (let li of lilist) {li.addeventListener ('Mouseenter', function () {let thisIndex = Arraylilist.FinDindex ((n) => n == this);}, false);}Résumer
Ce qui précède est tout le contenu de cet article. N'est-ce pas très concis? À travers cet article, je pense que ces choses m'ont déjà fait ressentir le charme d'ES6. J'espère qu'il sera utile à tout le monde d'apprendre ES6.