Qual é o significado de “=>” (uma seta formada a partir de iguais e maiores que) em JavaScript?

Eu sei que o operador >= significa mais do que ou igual a, mas eu vi => em algum código-fonte. Qual o significado desse operador?

Aqui está o código:

 promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => { if (!aDialogAccepted) return; saveAsType = fpParams.saveAsType; file = fpParams.file; continueSave(); }).then(null, Components.utils.reportError); } 

O que é isso

Esta é uma function de seta. As funções de seta são uma syntax curta, introduzida pelo ECMAscript 6, que pode ser usada de forma semelhante à maneira como você usaria as expressões de function. Em outras palavras, você pode usá-los frequentemente no lugar de expressões como function (foo) {...} . Mas eles têm algumas diferenças importantes. Por exemplo, eles não vinculam seus próprios valores (veja abaixo para discussão).

As funções de seta fazem parte da especificação do ECMAscript 6, mas não fazem parte do JavaScript “normal” em uso na maioria dos navegadores atualmente. Eles são, no entanto, parcialmente suportados no Node v. 4.0+ e em muitos navegadores (veja abaixo).

Você pode ler mais na documentação do Mozilla sobre funções de seta .

Da documentação do Mozilla:

Uma expressão de function de seta (também conhecida como function de seta de gordura) tem uma syntax mais curta em comparação com expressões de function e vincula lexicalmente this valor (não vincula seu próprio, arguments , super ou new.target ). As funções de seta são sempre anônimas. Essas expressões de function são mais adequadas para funções que não são de método e não podem ser usadas como construtores.

Uma nota sobre como this funciona nas funções de seta

Um dos resources mais úteis de uma function de seta está enterrado no texto acima:

Uma function de seta … liga-se lexicalmente a this valor (não vincula this si this …)

O que isso significa em termos mais simples é que a function de seta retém o valor this partir de seu contexto e não possui this . Uma function tradicional se liga a this valor, exigindo muita ginástica como self = this; , etc., para acessar ou manipular this de uma function dentro de outra function. Para mais informações sobre este tópico, veja a explicação e exemplos na documentação do Mozilla .

Exemplo de código

Exemplo (também dos documentos):

 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] 

Notas sobre compatibilidade

Você pode usar as funções de seta no Node, mas o suporte do navegador é irregular.

O suporte do navegador para essa funcionalidade melhorou bastante, mas ainda não é bastante difundido para a maioria dos usos baseados em navegador. A partir de 12 de dezembro de 2017, é suportado nas versões atuais de:

  • Chrome (v. 45+)
  • Firefox (v. 22+)
  • Borda (v. 12+)
  • Ópera (v. 32+)
  • Navegador Android (v. 47+)
  • Opera Mobile (v. 33+)
  • Chrome para Android (v. 47+)
  • Firefox para Android (v. 44+)
  • Safari (v. 10+)
  • Safari iOS (v. 10.2+)
  • Samsung Internet (v. 5+)
  • Navegador Baidu (v. 7.12+)

Não suportado em:

  • IE (através do v. 11)
  • Opera Mini (através do v. 8.0)
  • Navegador Blackberry (através do v. 10)
  • IE Mobile (através do v. 11)
  • UC Browser para Android (através do v. 11.4)
  • QQ (através de v. 1.2)

Você pode encontrar mais informações (e mais atuais) em CanIUse.com (nenhuma afiliação).

Isso é conhecido como uma function de seta, parte da especificação ECMAScript 2015 …

 var foo = ['a', 'ab', 'abc']; var bar = foo.map(f => f.length); console.log(bar); // 1,2,3 

Sintaxe mais curta que a anterior:

 // < ES6: var foo = ['a', 'ab', 'abc']; var bar = foo.map(function (f) { return f.length; }); console.log(bar); // 1,2,3 

DEMO

A outra coisa incrível é lexical this ... Normalmente, você faria algo como:

 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(); 

Mas isso poderia ser reescrito com a flecha assim:

 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(); 

DEMO

MDN
Mais sobre syntax

Para mais, aqui está uma boa resposta para quando usar as funções de seta.

Esta seria a “expressão de function de seta” introduzida no ECMAScript 6.

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/arrow_functions

Para fins históricos (se a página wiki mudar mais tarde), é:

Uma expressão de function de seta tem uma syntax menor em comparação com expressões de function e vincula lexicalmente esse valor. As funções de seta são sempre anônimas.

apenas para adicionar outro exemplo do que um lambda pode fazer sem usar o mapa:

 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 

Estas são funções de seta

Também conhecida como Fat Arrow Functions . Eles são uma maneira limpa e conveniente de escrever expressões de function, por exemplo function() {} .

Arrow As funções podem eliminar a necessidade de function , return e {} ao definir funções. São one-liners, semelhantes às expressões Lambda em Java ou Python.

Exemplo sem parâmetros

 var queue = ['Dave', 'Sarah', 'Sharon'], nextCustomer = () => queue[0]; console.log(nextCustomer()); // 'Dave' 

Como outros disseram, é uma nova syntax para criar funções.

No entanto, esse tipo de function é diferente das normais:

  • Eles ligam this valor. Como explicado pela especificação ,

    Uma ArrowFunction não define ligações locais para arguments , super , this ou new.target . Qualquer referência a arguments , super , this ou new.target dentro de uma ArrowFunction deve resolver para uma binding em um ambiente de new.target lexical . Normalmente, esse será o Ambiente de Função de uma function de fechamento imediato.

    Mesmo que uma ArrowFunction possa conter referências a super , o object de function criado na etapa 4 não é transformado em um método executando MakeMethod . Uma ArrowFunction que referencia super está sempre contida dentro de um não- ArrowFunction e o estado necessário para implementar super é acessível através do escopo que é capturado pelo object de function da ArrowFunction .

  • Eles são não construtores.

    Isso significa que eles não têm um método interno [[Construct]] e, portanto, não podem ser instanciados, por exemplo

     var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor 

Eu li, este é um símbolo de Arrow Functions no ES6

esta

 var a2 = a.map(function(s){ return s.length }); 

usando a Arrow Function pode ser escrito como

 var a3 = a.map( s => s.length ); 

Documento MDN

Adicionando um exemplo simples de CRUD com o 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)); 

Como todas as outras respostas já disseram, é parte da syntax da function de seta do ES2015. Mais especificamente, não é um operador, é um token pontuador que separa os parâmetros do corpo: ArrowFunction : ArrowParameters => ConciseBody . Por exemplo (params) => { /* body */ } .

ES6 Arrow funções:

Em javascript, o => é o símbolo de uma expressão de function de seta. Uma expressão de function de seta não tem sua própria binding e, portanto, não pode ser usada como uma function de construtor. por exemplo:

 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 obj