Quelle est la signification de "=>" (une flèche formée d’égaux & supérieure à) en JavaScript?
Je sais que l'opérateur >= signifie plus que ou égal à, mais j'ai vu => dans un code source. Quelle est la signification de cet opérateur?
Voici le code:
promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
if (!aDialogAccepted)
return;
saveAsType = fpParams.saveAsType;
file = fpParams.file;
continueSave();
}).then(null, Components.utils.reportError);
Ce que c'est
Il s'agit d'une fonction de flèche. Les fonctions de flèche constituent une syntaxe courte, introduite par ECMAscript 6, qui peut être utilisée de la même manière que vous utiliseriez des expressions de fonction. En d'autres termes, vous pouvez souvent les utiliser à la place d'expressions telles que function (foo) {...}. Mais ils ont des différences importantes. Par exemple, ils ne lient pas leurs propres valeurs de this (voir la discussion ci-dessous).
Les fonctions de flèche font partie de la spécification ECMAscript 6. Ils ne sont pas encore pris en charge par tous les navigateurs, mais ils le sont partiellement ou totalement dans Node v. 4.0 + et dans la plupart des navigateurs modernes utilisés depuis 2018. (J'ai inclus une liste partielle des navigateurs de support ci-dessous).
Vous pouvez en lire plus dans la documentation de Mozilla sur les fonctions de flèche .
De la documentation de Mozilla:
Une expression de fonction de flèche (également appelée fonction de flèche épaisse) a une syntaxe plus courte que celle de expressions de fonction et lie lexicalement la valeur
this(ne lie pas sa propre valeurthis,arguments,super, ounew.target). Les fonctions de flèche sont toujours anonymes. Ces expressions de fonction conviennent mieux aux fonctions non-méthodes et ne peuvent pas être utilisées en tant que constructeurs.
Note sur le fonctionnement de this dans les fonctions de flèche
L'une des fonctionnalités les plus pratiques d'une fonction de flèche est enterrée dans le texte ci-dessus:
Une fonction de flèche ... lie lexicalement la valeur
this(ne lie pas sa proprethis...)
Cela signifie plus simplement que la fonction de flèche conserve la valeur this de son contexte et ne possède pas son propre this. Une fonction traditionnelle peut lier sa propre valeur this, selon la façon dont elle est définie et appelée. Cela peut nécessiter beaucoup de gymnastique comme _self = this;_, etc. pour accéder à this ou la manipuler à partir d'une fonction dans une autre. Pour plus d'informations sur ce sujet, voir l'explication et les exemples dans la documentation de Mozilla .
Exemple de code
Exemple (également tiré de la documentation):
_var a = [
"We're up all night 'til the Sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];
// These two assignments are equivalent:
// Old-school:
var a2 = a.map(function(s){ return s.length });
// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );
// both a2 and a3 will be equal to [31, 30, 31, 31]
_Notes sur la compatibilité
Vous pouvez utiliser les fonctions de flèche dans Node, mais la prise en charge du navigateur est inégale.
La prise en charge de cette fonctionnalité par le navigateur s’est quelque peu améliorée, mais elle n’est pas encore assez répandue pour la plupart des utilisations basées sur un navigateur. À compter du 12 décembre 2017, il est pris en charge dans les versions actuelles de:
- Chrome (v. 45+)
- Firefox (version 22+)
- Edge (v. 12+)
- Opéra (v. 32+)
- Navigateur Android (v. 47+)
- Opera Mobile (v. 33+)
- Chrome pour Android (version 47+)
- Firefox pour Android (version 44+)
- Safari (v. 10+)
- iOS Safari (version 10.2+)
- Samsung Internet (version 5+)
- Navigateur Baidu (version 7.12+)
Non pris en charge dans:
- IE (à travers v. 11)
- Opera Mini (via v. 8.0)
- Navigateur Blackberry (jusqu'à la v. 10)
- IE Mobile (jusqu'à la v. 11)
- Navigateur UC pour Android (via v. 11.4)
- QQ (à travers v. 1.2)
Vous pouvez trouver plus d'informations (et plus récentes) à l'adresse CanIUse.com (aucune affiliation).
C'est ce qu'on appelle une fonction de flèche, une partie de ECMAScript 2015 spec ...
var foo = ['a', 'ab', 'abc'];
var bar = foo.map(f => f.length);
console.log(bar); // 1,2,3Syntaxe plus courte que la précédente:
// < ES6:
var foo = ['a', 'ab', 'abc'];
var bar = foo.map(function(f) {
return f.length;
});
console.log(bar); // 1,2,3L'autre chose géniale est lexical this... Habituellement, vous feriez quelque chose comme:
function Foo() {
this.name = name;
this.count = 0;
this.startCounting();
}
Foo.prototype.startCounting = function() {
var self = this;
setInterval(function() {
// this is the Window, not Foo {}, as you might expect
console.log(this); // [object Window]
// that's why we reassign this to self before setInterval()
console.log(self.count);
self.count++;
}, 1000)
}
new Foo();Mais cela pourrait être réécrit avec la flèche comme ceci:
function Foo() {
this.name = name;
this.count = 0;
this.startCounting();
}
Foo.prototype.startCounting = function() {
setInterval(() => {
console.log(this); // [object Object]
console.log(this.count); // 1, 2, 3
this.count++;
}, 1000)
}
new Foo();MDN
Plus d'informations sur la syntaxe
Pour plus d'informations, voici une très bonne réponse pour lorsque utilise les fonctions de flèche.
Ce serait "l'expression de fonction de flèche" introduite dans ECMAScript 6.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions
Pour des raisons historiques (si la page du wiki change plus tard), c'est:
Une expression de fonction de flèche a une syntaxe plus courte que celle des expressions de fonction et lie lexicalement la valeur this. Les fonctions de flèche sont toujours anonymes.
Ce sont des fonctions de flèche
Également connu sous le nom de fonctions de flèche épaisse . Ils constituent un moyen simple et cohérent d’écrire des expressions de fonction, par exemple. function() {}.
Les fonctions de flèche peuvent supprimer le besoin de function, return et {} lors de la définition de fonctions. Ce sont des lignes simples similaires aux expressions Lambda dans Java ou Python.
Exemple sans paramètres
const queue = ['Dave', 'Sarah', 'Sharon'];
const nextCustomer = () => queue[0];
console.log(nextCustomer()); // 'Dave'Si plusieurs instructions doivent être effectuées dans la même fonction de fonction flèche, vous devez encapsuler, dans cet exemple, queue[0] entre accolades {}. Dans ce cas, l'instruction return ne peut pas être omise.
Exemple avec 1 paramètre
const queue = ['Dave', 'Sarah', 'Sharon'];
const addCustomer = name => {
queue.Push(name);
};
addCustomer('Toby');
console.log(queue); // ['Dave', 'Sarah', 'Sharon', 'Toby']Vous pouvez omettre {} de ce qui précède.
Lorsqu'il n'y a qu'un seul paramètre, les crochets () autour du paramètre peuvent être omis.
Exemple avec plusieurs paramètres
const addNumbers = (x, y) => x + y
console.log(addNumbers(1, 5)); // 6Un exemple utile
const fruits = [
{name: 'Apple', price: 2},
{name: 'Bananna', price: 3},
{name: 'Pear', price: 1}
];
Si nous voulions obtenir le prix de chaque fruit dans un seul tableau, nous pourrions faire dans ES5:
fruits.map(function(fruit) {
return fruit.price;
}); // [2, 3, 1]
Dans ES6 avec les nouvelles fonctions de flèche, nous pouvons rendre ceci plus concis:
fruits.map(fruit => fruit.price); // [2, 3, 1]
Des informations supplémentaires sur les fonctions de flèche peuvent être trouvées ici .
Compatibilité du navigateur
- IE: pas encore pris en charge
- Edge: 12+ (toutes les versions)
- Firefox: 22 ans et plus
- Chrome: 45+
- Safari: 10+
- iOS Safari: 10.2+
- Navigateur Android: 56+
Des informations supplémentaires à jour peuvent être trouvées sur la compatibilité du navigateur ici
juste pour ajouter un autre exemple de ce qu'un lambda peut faire sans utiliser map:
a = 10
b = 2
var mixed = (a,b) => a * b;
// OR
var mixed = (a,b) => { (any logic); return a * b };
console.log(mixed(a,b))
// 20
Comme d'autres l'ont dit, c'est une nouvelle syntaxe pour créer des fonctions.
Cependant, ce type de fonctions diffère de celles normales:
Ils lient la valeur
this. Comme expliqué par la spécification ,Une ArrowFunction ne définit pas de liaisons locales pour
arguments,super,thisounew.target. Toute référence àarguments,super,thisounew.targetdans une fonction de flèche doit être résolue à une liaison dans un environnement englobant lexicalement. Il s’agit généralement de l’environnement de fonction d’une fonction immédiatement englobante.Même si un ArrowFunction peut contenir des références à
super, l'objet fonction créé à l'étape 4 n'est pas transformé en méthode en effectuant MakeMethod . Une ArrowFunction qui fait référence àsuperest toujours contenue dans une ArrowFunction non - et l'état nécessaire pour implémentersuperest accessible via la portée qui est capturée par l'objet fonction de ArrowFunction .Ils ne sont pas constructeurs.
Cela signifie qu'ils n'ont pas de méthode interne [[Construct]] et ne peuvent donc pas être instanciés, par exemple.
var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor
J'ai lu, c'est un symbole de Arrow Functions dans ES6
cette
var a2 = a.map(function(s){ return s.length });
using Arrow Function peut être écrit comme
var a3 = a.map( s => s.length );
Ajout d'un exemple simple CRUD avec Arrowfunction
//Arrow Function
var customers = [
{
name: 'Dave',
contact:'9192631770'
},
{
name: 'Sarah',
contact:'9192631770'
},
{
name: 'Akhil',
contact:'9928462656'
}],
// No Param READ
getFirstCustomer = () => {
console.log(this);
return customers[0];
};
console.log("First Customer "+JSON.stringify(getFirstCustomer())); // 'Dave'
//1 Param SEARCH
getNthCustomer = index=>{
if( index>customers.length)
{
return "No such thing";
}
else{
return customers[index];
}
};
console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1)));
//2params ADD
addCustomer = (name, contact)=> customers.Push({
'name': name,
'contact':contact
});
addCustomer('Hitesh','8888813275');
console.log("Added Customer "+JSON.stringify(customers));
//2 param UPDATE
updateCustomerName = (index, newName)=>{customers[index].name= newName};
updateCustomerName(customers.length-1,"HiteshSahu");
console.log("Updated Customer "+JSON.stringify(customers));
//1 param DELETE
removeCustomer = (customerToRemove) => customers.pop(customerToRemove);
removeCustomer(getFirstCustomer());
console.log("Removed Customer "+JSON.stringify(customers));
Insatisfait des autres réponses. La réponse la plus élue au 2019/3/13 est erronée dans les faits.
La version abrégée de => signifie qu'il s'agit d'un raccourci permettant d'écrire une fonction ET pour la lier au nom actuel this
const foo = a => a * 2;
Est effectivement un raccourci pour
const foo = function(a) { return a * 2; }.bind(this);
Vous pouvez voir toutes les choses qui ont été raccourcies. Nous n'avons pas besoin de function, ni de return ni de .bind(this) ni même d'accolades ou de parenthèses
Un exemple légèrement plus long d’une fonction de flèche pourrait être
const foo = (width, height) => {
const area = width * height;
return area;
};
Montrer que si nous voulons plusieurs arguments à la fonction, nous avons besoin de parenthèses et si nous voulons écrire plus d’une seule expression, nous avons besoin d’accolades et d’un return explicite.
Il est important de comprendre la partie .bind et c'est un sujet important. Cela a à voir avec ce que this signifie en JavaScript.
ALL les fonctions ont un paramètre implicite appelé this. La manière dont this est défini lors de l'appel d'une fonction dépend de la manière dont cette fonction est appelée.
Prendre
function foo() { console.log(this); }
Si vous l'appelez normalement
function foo() { console.log(this); }
foo();
this sera l'objet global.
Si vous êtes en mode strict
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
Ce sera undefined
Vous pouvez définir this directement à l'aide de call ou apply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
Vous pouvez également définir implicitement this à l'aide de l'opérateur de point .
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
Un problème survient lorsque vous souhaitez utiliser une fonction en tant que rappel ou auditeur. Vous faites classe et souhaitez affecter une fonction en tant que rappel qui accède à une instance de la classe.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
Le code ci-dessus ne fonctionnera pas, car lorsque l'élément déclenche l'événement et appelle la fonction, la valeur this ne sera pas l'instance de la classe.
Un moyen courant de résoudre ce problème consiste à utiliser .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
Parce que la syntaxe de la flèche fait la même chose que nous pouvons écrire
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bind crée une nouvelle fonction . Si bind n’existait pas, vous pourriez faire votre propre comme ceci
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
En JavaScript plus ancien sans l'opérateur de diffusion, il serait
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
Comprendre ce code nécessite comprendre les fermetures mais la version courte est bind crée une nouvelle fonction qui appelle toujours la fonction d'origine avec la valeur this qui lui était liée. La fonction de flèche fait la même chose car il s’agit d’un raccourci pour bind(this)
Comme toutes les autres réponses l'ont déjà dit, cela fait partie de la syntaxe de la fonction de flèche ES2015. Plus précisément, ce n'est pas un opérateur, c'est un jeton de ponctuation qui sépare les paramètres du corps: ArrowFunction : ArrowParameters => ConciseBody. Par exemple. (params) => { /* body */ }.
ES6 Fonctions des flèches:
En javascript, le => est le symbole d'une expression de fonction de flèche. Une expression de fonction de flèche n'a pas sa propre liaison this et ne peut donc pas être utilisée en tant que fonction constructeur. par exemple:
var words = 'hi from outside object';
let obj = {
words: 'hi from inside object',
talk1: () => {console.log(this.words)},
talk2: function () {console.log(this.words)}
}
obj.talk1(); // doesn't have its own this binding, this === window
obj.talk2(); // does have its own this binding, this is objRègles d'utilisation des fonctions de flèche:
- S'il y a exactement un argument, vous pouvez omettre les parenthèses de l'argument.
- Si vous retournez une expression et le faites sur la même ligne, vous pouvez omettre les instructions
{}etreturn.
Par exemple:
let times2 = val => val * 2;
// It is on the same line and returns an expression therefore the {} are ommited and the expression returns implictly
// there also is only one argument, therefore the parentheses around the argument are omitted
console.log(times2(3));Les fonctions fléchées signalées par le symbole (=>) vous aident à créer des fonctions et des méthodes anonymes. Cela conduit à une syntaxe plus courte. Par exemple, vous trouverez ci-dessous une simple fonction "Ajouter" qui renvoie l’addition de deux nombres.
function Add(num1 , num2 ){
return num1 + num2;
}
La fonction ci-dessus devient plus courte en utilisant la syntaxe "Flèche" comme indiqué ci-dessous.
Le code ci-dessus comprend deux parties, comme indiqué dans le diagramme ci-dessus: -
Entrée: - Cette section spécifie les paramètres d'entrée de la fonction anonyme.
Logique: - Cette section vient après le symbole “=>”. Cette section présente la logique de la fonction réelle.
De nombreux développeurs pensent que la fonction flèche rend votre syntaxe plus courte, plus simple et rend donc votre code lisible.
Si vous croyez la phrase ci-dessus, laissez-moi vous assurer que c’est un mythe. Si vous pensez un instant, une fonction correctement écrite avec le nom est beaucoup plus lisible que les fonctions cryptiques créées sur une ligne en utilisant un symbole de flèche.
L’utilisation principale de la fonction flèche est de s’assurer que le code s’exécute dans le contexte des appelants.
Voir le code ci-dessous dans lequel une variable globale "contexte" est définie, cette variable globale est accessible dans une fonction "SomeOtherMethod" appelée à partir d'une autre méthode "SomeMethod".
Cette "SomeMethod" a une variable "context" locale. Maintenant, parce que "SomeOtherMethod" est appelé à partir de "" SomeMethod ", nous nous attendons à ce qu'il affiche le" contexte local ", mais" le contexte global ".
var context = “global context”;
function SomeOtherMethod(){
alert(this.context);
}
function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}
var instance = new SomeMethod();
Mais si remplacer l'appel en utilisant la fonction Flèche, il affichera "contexte local".
var context = "global context";
function SomeMethod(){
this.context = "local context";
SomeOtherMethod = () => {
alert(this.context);
}
SomeOtherMethod();
}
var instance = new SomeMethod();
Je vous encourage à lire ce lien ( Fonction Arrow en JavaScript ) qui explique tous les scénarios de contexte javascript et dans quels scénarios le contexte des appelants n'est pas respecté.
Vous pouvez également voir la démonstration de fonction de flèche avec javascript dans cette vidéo sur youtube , qui montre pratiquement le terme contexte.