To znana jako funkcja Strzałki, część ECMAScript 2015 spec ...

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

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

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

Krótsza składnia niż poprzednia:

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

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

DEMO

Drugą niesamowitą rzeczą jest leksykalna this... Zazwyczaj robisz coś w stylu:

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

Ale można to przepisać strzałką jak to:

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
więcej o składni

Aby dowiedzieć się więcej, oto całkiem dobra odpowiedź nakiedy używać funkcji strzałek.

Są to funkcje strzałek

Znane również jako Fat Arrow Functions. Są one czystym i wygodnym sposobem zapisu wyrażeń funkcji, np. function() {}.

Funkcje strzałek mogą usunąć potrzebę function, return i {} przy definiowaniu funkcji. Są one Jednowierszowe, podobne do wyrażeń Lambda w Javie lub Pythonie.

Przykład bez parametrów

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

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

Jeśli w ramach tej samej funkcji strzałki trzeba wykonać wiele poleceń, należy aby zawinąć, w tym przykładzie, queue[0] w nawiasy curley {}. W tym przypadku nie można pominąć instrukcji return.

Przykład z 1 parametrem

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

addCustomer('Toby');

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

Możesz pominąć {} z powyższego.

Gdy istnieje jeden parametr, nawiasy () wokół parametru mogą być pominięte.

Przykład z wieloma parametrami

const addNumbers = (x, y) => x + y

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

Użyteczny przykład

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

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

W ES6 z nowymi funkcjami strzałek możemy uczynić to bardziej zwięzłym:

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

Dodatkowe informacje na temat funkcji strzałek można znaleźć tutaj .

Byłoby to "wyrażenie funkcji strzałek" wprowadzone w ECMAScript 6.

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

Dla celów historycznych (jeśli strona wiki zmieni się później), jest to:

Wyrażenie funkcji strzałki ma krótszą składnię w porównaniu do wyrażeń funkcji i leksykalnie wiąże tę wartość. Funkcje strzałek są zawsze anonimowe.

Aby dodać kolejny przykład tego, co lambda może zrobić bez użycia mapy:

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

Jak mówili inni, jest to nowa składnia do tworzenia funkcji.

Jednak tego rodzaju funkcje różnią się od normalnych:

• Wiążą wartość this. Jak wyjaśnia spec,

  An ArrowFunction nie definiuje lokalnych wiązań dla arguments, super, this, lub new.target. Wszelkie odniesienia do arguments, super, this, lub new.target w obrębie ArrowFunction musi rozwiązywać do wiązania w leksykalnie zamykającym środowisko. Typowo będzie to środowisko funkcyjne natychmiastowego zamykania funkcja.

  Chociaż funkcja ArrowFunction może zawierać odniesienia do super, obiekt funkcji utworzony w kroku 4 nie jest przekształcony w metodę przez wykonanie MakeMethod . An ArrowFunction that references super jest zawsze zawarta w nie - ArrowFunction i niezbędne stan do wdrożenia super jest dostępny za pośrednictwem zakresu to jest uchwycony przez obiekt funkcji ArrowFunction .

• Nie są konstruktorami.

  Oznacza to, że nie mają wewnętrznej metody [[Construct]], a zatem nie mogą być utworzone, np.

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

Czytałem, że jest to symbol Arrow Functions w ES6

To

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

Używając Arrow Function można zapisać jako

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

MDN Docs

Niezadowolony z innych odpowiedzi. Top głosował odpowiedź od 2019/3/13 jest faktycznie błędne.

Skrócona wersja tego, co => oznacza, że jest to skrót piszący funkcję i do wiązania jej z bieżącym this

const foo = a => a * 2;

Jest skrótem do

const foo = function(a) { return a * 2; }.bind(this);

Możesz zobaczyć wszystkie rzeczy, które zostały skrócone. Nie potrzebowaliśmy function, ani return ani .bind(this) ani nawet szelek ani nawiasów

Nieco dłuższy przykład funkcji strzałki może być

const foo = (width, height) => {
  const area = width * height;
  return area;
};

Pokazując, że jeśli chcemy mieć wiele argumentów do funkcji, potrzebujemy nawiasów, a jeśli chcemy napisać więcej niż jedno wyrażenie, potrzebujemy klamer i jawnego return.

Ważne jest, aby zrozumieć część .bind i to jest duży temat. Ma to związek z tym, co this oznacza w JavaScript.

Wszystkie funkcje mają niejawny parametr o nazwie this. To, jak this jest ustawione podczas wywoływania funkcji, zależy od tego, jak ta funkcja jest dzwoniłem.

Weź

function foo() { console.log(this); }

Jeśli nazwiesz to normalnie

function foo() { console.log(this); }
foo();

this będzie obiektem globalnym.

Jeśli jesteś w trybie ścisłym

`use strict`;
function foo() { console.log(this); }
foo();

// or

function foo() {
   `use strict`;
   console.log(this);
 }
foo();

Będzie undefined

Możesz ustawić this bezpośrednio za pomocą call lub 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}

Można również ustawić this domyślnie używając operatora kropki .

function foo(msg) { console.log(msg, this); }
const obj = {
   abc: 123,
   bar: foo,
}
obj.bar('Hola');  // prints Hola {abc:123, bar: f}

Problem pojawia się, gdy chcesz użyć funkcji jako wywołania zwrotnego lub słuchacza. Tworzysz klasę i chcesz przypisać funkcję jako callback to dostęp do instancji klasy.

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name);  // won't work
    }); 
  }
}

Powyższy kod nie zadziała, ponieważ gdy element wywoła zdarzenie i wywoła funkcję, wartość this nie będzie instancją klasy.

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click', function() {
       console.log(this.name); 
    }.bind(this); // <=========== ADDED! ===========
  }
}

Ponieważ składnia arrow robi to samo możemy napisać

class ShowName {
  constructor(name, elem) {
    this.name = name;
    elem.addEventListener('click',() => {
       console.log(this.name); 
    });
  }
}

bind efektywnie tworzy nową funkcję . Jeśli bind nie istnieje można w zasadzie zrobić własne jak to

function bind(functionToBind, valueToUseForThis) {
  return function(...args) {
    functionToBind.call(valueToUseForThis, ...args);
  };
}

W starszych JavaScript bez operatora spread byłoby

function bind(functionToBind, valueToUseForThis) {
  return function() {
    functionToBind.apply(valueToUseForThis, arguments);
  };
}

Zrozumienie, że kod wymaga zrozumienia zamknięć , ale skrócona wersja to bind tworzy nową funkcję, która zawsze wywołuje oryginalną funkcję z this wartością, która była z nią związana. Funkcje strzałek robią to samo, ponieważ są skrótem do bind(this)

Dodawanie prostego przykładu CRUD z funkcją 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)); 

Jak wszystkie inne odpowiedzi już powiedziały, jest to część składni funkcji arrow ES2015. Dokładniej, nie jest to operator, jest to znak interpunkcyjny, który oddziela parametry od ciała: ArrowFunction : ArrowParameters => ConciseBody. Np. (params) => { /* body */ }.

Funkcje strzałek oznaczone symbolem (=>) pomagają tworzyć anonimowe funkcje i metody. To prowadzi do krótszej składni. Na przykład poniżej znajduje się prosta funkcja "Add", która zwraca dodanie dwóch liczb.

function Add(num1 , num2 ){
return num1 + num2;
}

Powyższa funkcja staje się krótsza, używając składni "Arrow", jak pokazano poniżej.

Powyższy kod składa się z dwóch części, jak pokazano na powyższym schemacie:-

Input: - Ta sekcja określa parametry wejściowe do anonimowego funkcja.

Logic: - Ta sekcja pojawia się po symbolu "=>". Ta sekcja ma logikę rzeczywistej funkcji.

wielu programistów uważa, że funkcja arrow sprawia, że składnia jest krótsza, prostsza, a tym samym sprawia, że kod jest czytelny.

Głównym zastosowaniem funkcji strzałek jest upewnienie się, że kod działa w rozmówcy.

Patrz poniższy kod, w którym zdefiniowano globalną zmienną "context", ta globalna zmienna jest dostępna wewnątrz funkcji" SomeOtherMethod", która jest wywoływana z innej metody"SomeMethod".

Ten "SomeMethod" ma lokalną zmienną "context". Teraz, ponieważ "SomeOtherMethod" jest wywoływany z ""SomeMethod", oczekujemy, że wyświetli "lokalny kontekst" , ale wyświetla "kontekst globalny".

var context = “global context”;

function SomeOtherMethod(){
alert(this.context);
}

function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}

var instance = new SomeMethod();

Ale jeśli zastąp wywołanie za pomocą funkcji Strzałki, wyświetli się "kontekst lokalny".

var context = "global context";

    function SomeMethod(){
        this.context = "local context";
        SomeOtherMethod = () => {
            alert(this.context);
        }
        SomeOtherMethod();
    }
    var instance = new SomeMethod();

Zachęcam do przeczytania tego linku (funkcja Arrow w JavaScript ), który wyjaśnia wszystkie scenariusze kontekstu javascript i w których scenariuszach kontekst wywołujących nie jest przestrzegany.

Możesz również zobaczyć demonstrację funkcji strzałek z javascript w tym filmie na youtube , który demonstruje praktycznie termin Kontekst.

Jak stwierdzili inni, zwykłe (tradycyjne) funkcje używają this z obiektu, który wywołał funkcję, (np. przycisk, który został kliknięty) . Zamiast tego, funkcje strzałek używają this z obiektu, który definiuje funkcję.

Rozważmy dwie prawie identyczne funkcje:

regular = function() {
  ' Identical Part Here;
}


arrow = () => {
  ' Identical Part Here;
}

Poniższy fragment pokazuje podstawową różnicę pomiędzy tym, co this reprezentuje dla każdej funkcji. Na funkcja regularna wyjścia [object HTMLButtonElement] funkcja strzałki wyjścia [object Window].

<html>
 <button id="btn1">Regular: `this` comes from "this button"</button>
 <br><br>
 <button id="btn2">Arrow: `this` comes from object that defines the function</button>
 <p id="res"/>

 <script>
  regular = function() {
    document.getElementById("res").innerHTML = this;
  }

  arrow = () => {
    document.getElementById("res").innerHTML = this;
  }

  document.getElementById("btn1").addEventListener("click", regular);
  document.getElementById("btn2").addEventListener("click", arrow);
 </script>
</html>

ES6 Funkcje strzałek:

W javascript => jest symbolem wyrażenia funkcji strzałki. Wyrażenie funkcji strzałki nie ma własnego powiązania this i dlatego nie może być użyte jako funkcja konstruktora. na przykład:

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

Zasady korzystania z funkcji strzałek:

• Jeśli istnieje dokładnie jeden argument, możesz pominąć nawiasy argumentu.
• jeśli zwrócisz wyrażenie i zrobisz to w tej samej linii można pominąć {} i return twierdzenie

Na przykład:

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