operadores - ¿Cuál es el significado de “=>”(una flecha formada por iguales y mayores que en JavaScript)?

operadores logicos

Question

Sé que el operador >= significa más o igual que, pero he visto => en algún código fuente. ¿Cuál es el significado de ese operador?

Aquí está el código:

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
    if (!aDialogAccepted)
        return;

    saveAsType = fpParams.saveAsType;
    file = fpParams.file;

    continueSave();
}).then(null, Components.utils.reportError);

Answer 1

Estas son funciones de flecha

También conocido como funciones de flecha de grasa . Son una forma limpia y coherente de escribir expresiones de funciones, por ejemplo, function() {} .

Las funciones de flecha pueden eliminar la necesidad de function , return y {} al definir funciones. Son de una sola línea, similares a Lambda Expressions en Java o Python.

Ejemplo sin parámetros

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

console.log(nextCustomer()); // ''Dave''

Si es necesario hacer varias declaraciones dentro de la misma función de flecha, debe ajustar, en este ejemplo, la queue[0] entre paréntesis {} . En este caso, la declaración de retorno no se puede omitir.

Ejemplo con 1 parámetro

var queue       = [''Dave'', ''Sarah'', ''Sharon''],
    addCustomer = name => { queue.push(name) }

addCustomer(''Toby'');

console.log(queue); // [''Dave'', ''Sarah'', ''Sharon'', ''Toby'']

Puedes omitir {} de lo anterior.

Cuando hay un solo parámetro, se pueden omitir los paréntesis () alrededor del parámetro.

Ejemplo con multiples parametros.

var addition = (x, y) => x + y

console.log(addition(1, 5)); // 6

Un ejemplo util

var fruits = [
    {name: ''Apple'', price: 2},
    {name: ''Bananna'', price: 3},
    {name: ''Pear'', price: 1}
];

Si quisiéramos obtener el precio de cada fruta en una sola matriz, en ES5 podríamos hacer:

fruits.map(function(fruit) {
    return fruit.price;
}); // [2, 3, 1]

En ES6 con las nuevas funciones de flecha, podemos hacer esto más conciso:

fruits.map(fruit => fruit.price); // [2, 3, 1]

Puede encontrar información adicional sobre las funciones de flecha here .

Compatibilidad del navegador

• IE: no es compatible todavía
• Edge: 12+ (Todas las versiones)
• Firefox: 22+
• Chrome: 45+
• Safari: 10+
• iOS Safari: 10.2+
• Navegador de Android: 56+

Puede encontrar información adicional actualizada sobre la compatibilidad del navegador here

Answer 2

Lo que es

Esta es una función de flecha. Las funciones de flecha son una sintaxis corta, introducida por ECMAscript 6, que se pueden usar de manera similar a como usarías las expresiones de función. En otras palabras, a menudo se pueden usar en lugar de expresiones como function (foo) {...} . Pero tienen algunas diferencias importantes. Por ejemplo, no vinculan sus propios valores de this (ver más abajo para discusión).

Las funciones de flecha son parte de la especificación ECMAscript 6, pero no son parte del JavaScript "normal" que se usa en la mayoría de los navegadores de hoy. Sin embargo, son parcialmente compatibles con Node v. 4.0+ y en muchos navegadores (ver más abajo).

Puedes leer más en la documentación de Mozilla sobre las funciones de flecha .

De la documentación de Mozilla:

Una expresión de función de flecha (también conocida como función de flecha fat) tiene una sintaxis más corta en comparación con las expresiones de función y vincula de manera léxica this valor (no vincula sus propios arguments , super o new.target ). Las funciones de flecha son siempre anónimas. Estas expresiones de función son más adecuadas para las funciones que no son de método y no pueden utilizarse como constructores.

Una nota sobre cómo funciona this en las funciones de flecha

Una de las características más útiles de una función de flecha se encuentra en el texto anterior:

Una función de flecha ... vincula de forma léxica el valor de this (no se une a this ...)

Lo que esto significa en términos más simples es que la función de flecha retiene this valor de su contexto y no tiene this propio. Una función tradicional enlaza su propio valor, requiriendo mucha gimnasia como self = this; , etc., para acceder o manipular this desde una función dentro de otra función. Para obtener más información sobre este tema, consulte la explicación y los ejemplos en la documentación de Mozilla .

Código de ejemplo

Ejemplo (también de la documentación):

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 la compatibilidad

Puede usar las funciones de flecha en Nodo, pero el soporte del navegador es irregular.

El soporte del navegador para esta funcionalidad ha mejorado bastante, pero aún no está lo suficientemente extendido para la mayoría de los usos basados ​​en el navegador. A partir del 12 de diciembre de 2017, se admite en las versiones actuales de:

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

No soportado en:

• IE (hasta v. 11)
• Opera Mini (hasta v. 8.0)
• Blackberry Browser (hasta v. 10)
• IE Mobile (hasta v. 11)
• UC Browser para Android (hasta v. 11.4)
• QQ (hasta v. 1.2)

Puede encontrar más información (y más actual) en CanIUse.com (sin afiliación).

Answer 3

ES6 funciones de flecha:

En javascript, el => es el símbolo de una expresión de función de flecha. Una expresión de la función de flecha no tiene this enlace propio y, por lo tanto, no se puede utilizar como una función constructora. por ejemplo:

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

Reglas de uso de las funciones de flecha:

• Si hay exactamente un argumento, puede omitir los paréntesis del argumento.
• Si devuelve una expresión y hace esto en la misma línea, puede omitir {} y la declaración de return

Por ejemplo:

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

Answer 4

Añadiendo ejemplo de CRUD simple con la función de flecha

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

Answer 5

Como han dicho otros, es una nueva sintaxis para crear funciones.

Sin embargo, este tipo de funciones difieren de las normales:

• Se unen a this valor. Según lo explicado por la especificación ,

  Un ArrowFunction no define enlaces locales para arguments , super , this o new.target . Cualquier referencia a arguments , super , this o new.target dentro de ArrowFunction debe resolverse en un enlace en un entorno de encierro léxico. Normalmente, este será el entorno de funciones de una función que lo encierra de inmediato.

  A pesar de que ArrowFunction puede contener referencias a super , el objeto de función creado en el paso 4 no se convierte en un método mediante la ejecución de MakeMethod . Un ArrowFunction que hace referencia a super siempre está contenido dentro de un non - ArrowFunction y el estado necesario para implementar super es accesible a través del alcance que captura el objeto de función de ArrowFunction .

• No son constructores.

  Eso significa que no tienen un método interno [[Construir]], y por lo tanto no se pueden crear instancias, por ejemplo

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

Answer 6

Como todas las otras respuestas ya han dicho, es parte de la sintaxis de la función de flecha de ES2015. Más específicamente, no es un operador, es un token de puntuación que separa los parámetros del cuerpo: ArrowFunction : ArrowParameters => ConciseBody . Por ejemplo, (params) => { /* body */ } .

Answer 7

Eso se conoce como una función de flecha, parte de la especificación ECMAScript 2015 ...

var foo = [''a'', ''ab'', ''abc''];

var bar = foo.map(f => f.length);

console.log(bar); // 1,2,3

Sintaxis más corta que la anterior:

// < ES6:
var foo = [''a'', ''ab'', ''abc''];

var bar = foo.map(function (f) {
  return f.length;
});
console.log(bar); // 1,2,3

DEMO

La otra cosa asombrosa es this léxico ... Generalmente, harías 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();

Pero eso podría reescribirse con la flecha como esta:

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
Más sobre la sintaxis

Para más, here''s una buena respuesta para cuándo usar las funciones de flecha.

Answer 8

Esta sería la "expresión de la función de flecha" introducida en ECMAScript 6.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions

Para propósitos históricos (si la página wiki cambia más adelante), es:

Una expresión de función de flecha tiene una sintaxis más corta en comparación con las expresiones de función y vincula de manera léxica el valor de este. Las funciones de flecha son siempre anónimas.

Answer 9

He leído, este es un símbolo de las Arrow Functions de Arrow Functions en ES6

esta

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

utilizando la Arrow Function se puede escribir como

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

MDN Docs

Answer 10

Solo para agregar otro ejemplo de lo que puede hacer un lambda sin usar el 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