Explication détaillée des fonctions de flèche dans JavaScript ES6

ES6 peut utiliser "flèche" (=>) pour définir les fonctions. Notez que ce sont des fonctions et n'utilisez pas cette méthode pour définir des classes (constructeurs).

1. Syntaxe

1. Une fonction simple avec un paramètre

 var single = a => Asingle ('Hello, World') // 'Hello, World'

2. S'il n'y a pas de paramètres, vous devez utiliser des supports avant la flèche.

 var log = () => {alert ('no param')}

3. Plusieurs paramètres nécessitent des supports et des intervalles de virgule entre les paramètres, tels que l'ajout de deux nombres

 var add = (a, b) => a + badd (3, 8) // 11

4. Des accolades bouclées sont nécessaires pour plusieurs instructions dans le corps de fonction

 var add = (a, b) => {if (typeof a == 'nombre' && type de b == 'nombre') {return a + b} else {return 0}}

5. Lorsque vous renvoyez l'objet, vous devez l'envelopper entre parenthèses, car les accolades sont occupées et interprétées comme des blocs de code.

 var gethash = arr => {// ... return ({name: 'jack', âge: 33})}

6. directement en tant que gestionnaire d'événements

 document.addeventListener ('click', ev => {console.log (ev)})

7. Trier le rappel comme tableau

 var arr = [1, 9, 2, 4, 3, 8] .sort ((a, b) => {if (a - b> 0) {return 1} else {return -1}}) arr // [1, 2, 3, 4, 8, 9]

2. Faites attention

1. Le type d'opérateur est le même que la fonction ordinaire

 var func = a => aconsole.log (typeof func); // "fonction"

2. L'instructionof renvoie également vrai, indiquant qu'il s'agit également d'une instance de fonction

 Console.log (fonction Func InstanceOf); // vrai

3. Ceci est fixe, plus modifiable

 obj = {data: ['John Backus', 'John Hopcroft'], init: function () {document.onclick = ev => {alert (this.data) // ['John Backus', 'John Hopcroft']} // non-arrow function // Document.onclick = function (ev) {// alert (this.data) // undfined //}}}

Ceci est très utile, n'a plus besoin de me , self , de _this bind .

4. La fonction de flèche ne peut pas être utilisée avec un nouveau

 var personne = (nom, âge) => {this.name = name this.age =} var p = new func ('John', 33) // error

5. L'argument ne peut pas être utilisé

 var func = () => {console.log (arguments)} func (55) //

Pour 5, le test dans Firefox36 peut produire 55, et il ne semble pas y avoir de limite.

3. Résumé

Ce qui précède est l'introduction complète de la fonction flèche dans ES6. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez laisser un message à discuter.