Что это

Это стрелочная функция. Стрелочные функции - это короткий синтаксис, введенный в ECMAscript 6, который можно использовать аналогично тому, как вы использовали бы функциональные выражения. Другими словами, вы можете часто использовать их вместо таких выражений, как function (foo) {...}. Но у них есть несколько важных отличий. Например, они не связывают свои собственные значения this (см. Обсуждение ниже).

Стрелочные функции являются частью спецификации ECMAscript 6. Они еще не поддерживаются во всех браузерах, но частично или полностью поддерживаются в Node v. 4.0+ и в большинстве современных браузеров, используемых по состоянию на 2018 г. (ниже я привел неполный список поддерживаемых браузеров).

Дополнительную информацию можно найти в документации Mozilla. о стрелочных функциях.

Из документации Mozilla:

Выражение функции стрелки (также известное как функция жирной стрелки) имеет более короткий синтаксис по сравнению с функциональные выражения и лексически связывает this значение (не связывает собственное this, arguments, super или _ 7_). Стрелочные функции всегда анонимны. Эти функциональные выражения лучше всего подходят для функций, не являющихся методами, и их нельзя использовать в качестве конструкторов.

Примечание о том, как this работает в стрелочных функциях

Одна из самых удобных функций стрелочной функции скрыта в тексте выше:

Стрелочная функция ... лексически связывает значение this (не связывает собственное _10 _...)

Проще говоря, это означает, что стрелочная функция сохраняет значение this из своего контекста и не имеет собственного this. Традиционная функция может привязать свое собственное значение this в зависимости от того, как оно определено и вызвано. Это может потребовать множества упражнений, таких как self = this; и т. Д., Чтобы получить доступ или управлять this из одной функции внутри другой функции. Для получения дополнительной информации по этой теме см. Объяснение и примеры в документации Mozilla.

Пример кода

Пример (также из документации):

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]

Примечания по совместимости

Вы можете использовать стрелочные функции в Node, но поддержка браузером нечеткая.

Браузерная поддержка этой функции немного улучшилась, но она все еще недостаточно широко распространена для большинства браузерных применений. По состоянию на 12 декабря 2017 г. он поддерживается в текущих версиях:

• Chrome (версия 45+)
• Firefox (версия 22+)
• Edge (v. 12+)
• Opera (версии 32+)
• Браузер Android (версия 47+)
• Opera Mobile (версия 33+)
• Chrome для Android (версия 47+)
• Firefox для Android (версия 44+)
• Safari (версия 10+)
• iOS Safari (версия 10.2+)
• Samsung Internet (v. 5+)
• Браузер Baidu (версии 7.12+)

Не поддерживается в:

• IE (до версии 11)
• Opera Mini (до версии 8.0)
• Браузер Blackberry (до версии 10)
• IE Mobile (до версии 11)
• UC Browser для Android (до версии 11.4)
• QQ (до версии 1.2)

Дополнительную (и более актуальную) информацию можно найти на сайте CanIUse.com (без аффилированности).

Это известно как функция стрелки, часть ECMAScript 2015 спецификации ...

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

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

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

Более короткий синтаксис, чем предыдущий:

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

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

ДЕМО

Еще одна замечательная вещь - это лексика _3 _... Обычно вы делаете что-то вроде:

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

Но это можно было бы переписать стрелкой так:

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
Подробнее о синтаксисе

Для получения дополнительной информации здесь довольно хороший ответ для < em> когда использовать стрелочные функции.

Это стрелочные функции

Также известен как Функции жирных стрелок. Это простой и понятный способ написания функциональных выражений, например. function() {}.

Стрелочные функции могут устранить необходимость в function, return и {} при определении функций. Это однострочные символы, похожие на лямбда-выражения в Java или Python.

Пример без параметров

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

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

Если в одной и той же стрелочной функции необходимо сделать несколько операторов, вам нужно заключить в этом примере queue[0] в фигурные скобки {}. В этом случае оператор возврата не может быть пропущен.

Пример с 1 параметром

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

addCustomer('Toby');

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

Вы можете опустить {} из приведенного выше.

Если параметр один, скобки () вокруг параметра можно не ставить.

Пример с несколькими параметрами

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

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

Полезный пример

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

Если бы мы хотели получить цену каждого фрукта в одном массиве, в ES5 мы могли бы сделать:

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

В ES6 с новыми функциями стрелок мы можем сделать это более кратким:

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

Дополнительную информацию о функциях стрелок можно найти здесь.

Это будет «выражение функции стрелки», введенное в ECMAScript 6.

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

В исторических целях (если страница вики изменится позже) это:

Выражение функции стрелки имеет более короткий синтаксис по сравнению с выражениями функций и лексически связывает значение this. Стрелочные функции всегда анонимны.

просто чтобы добавить еще один пример того, что лямбда может делать без использования карты:

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

Как уже говорили другие, это новый синтаксис для создания функций.

Однако такие функции отличаются от обычных:

• # P3 #

  # P4 # # P5 #

• Они неконструкторы.

  Это означает, что у них нет внутреннего метода [[Construct]], и поэтому их нельзя создать, например

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

Я читал, это символ Arrow Functions в ES6

это

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

используя Arrow Function, можно записать как

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

Документы MDN

Недоволен другими ответами. Ответ, получивший наибольшее количество голосов от 13.03.2019, фактически неверен.

Краткая версия того, что => означает, - это ярлык, записывающий функцию И для привязки ее к текущему this

const foo = a => a * 2;

Фактически является ярлыком для

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

Вы можете увидеть все, что было сокращено. Нам не нужны ни function, ни return, ни .bind(this), ни даже фигурные скобки или круглые скобки

Чуть более длинный пример стрелочной функции мог бы быть

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

Показывая, что если нам нужно несколько аргументов функции, нам нужны круглые скобки, а если мы хотим написать более одного выражения, нам нужны фигурные скобки и явный return.

Важно понимать .bind часть, и это большая тема. Это связано с тем, что this означает в JavaScript.

ВСЕ функции имеют неявный параметр this. Как this устанавливается при вызове функции, зависит от того, как эта функция вызывается.

Брать

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

Если вы назовете это нормально

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

this будет глобальным объектом.

Если вы в строгом режиме

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

// or

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

Будет undefined

Вы можете установить this напрямую, используя call или 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}

Вы также можете установить this неявно, используя оператор точки .

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

Проблема возникает, когда вы хотите использовать функцию в качестве обратного вызова или слушателя. Вы создаете класс и хотите назначить функцию в качестве обратного вызова, которая обращается к экземпляру класса.

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

Приведенный выше код не будет работать, потому что, когда элемент запускает событие и вызывает функцию, значение this не будет экземпляром класса.

Один из распространенных способов решить эту проблему - использовать .bind

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

Поскольку синтаксис стрелки делает то же самое, мы можем написать

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

bind эффективно создает новую функцию. Если бы bind не существовало, вы могли бы сделать свой собственный вот так

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

В более старом JavaScript без оператора распространения это было бы

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

Для понимания этого кода требуется понимание замыканий, но краткая версия is bind создает новую функцию, которая всегда вызывает исходную функцию со значением this, которое было привязано к ней. Стрелочные функции делают то же самое, поскольку они являются ярлыком для bind(this)

Добавление простого примера CRUD с функцией стрелки

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

Стрелочные функции, обозначенные символом (=>), помогают создавать анонимные функции и методы. Это приводит к более короткому синтаксису. Например, ниже представлена ​​простая функция «Добавить», которая возвращает сложение двух чисел.

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

Вышеупомянутая функция становится короче за счет использования синтаксиса «Стрелка», как показано ниже.

Приведенный выше код состоит из двух частей, как показано на диаграмме выше:

Вход: - В этом разделе указываются входные параметры анонимной функции.

Логика: - Этот раздел идет после символа «=>». В этом разделе есть логика самой функции.

Многие разработчики считают, что функция стрелки делает ваш синтаксис короче, проще и, таким образом, делает ваш код читабельным.

Если вы верите в приведенное выше предложение, позвольте мне заверить вас, что это миф. Если вы на мгновение думаете, что правильно написанная функция с именем намного удобнее для чтения, чем загадочные функции, созданные в одной строке с использованием символа стрелки.

Основное использование стрелочной функции - убедиться, что код выполняется в контексте вызывающего абонента.

См. Приведенный ниже код, в котором определена глобальная переменная context, доступ к этой глобальной переменной осуществляется внутри функции SomeOtherMethod, которая вызывается из другого метода SomeMethod.

Этот SomeMethod имеет локальную переменную контекста. Теперь, поскольку SomeOtherMethod вызывается из SomeMethod, мы ожидаем, что он будет отображать «локальный контекст», но он отображает «глобальный контекст».

var context = “global context”;

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

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

var instance = new SomeMethod();

Но если заменить вызов с помощью функции стрелки, он отобразит «локальный контекст».

var context = "global context";

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

Я рекомендую вам прочитать эту ссылку (стрелочная функция в JavaScript ), которые объясняют все сценарии контекста javascript и в каких сценариях контекст вызывающих абонентов не соблюдается.

Вы также можете увидеть демонстрацию функции стрелки с javascript в этом видео на YouTube, которое Практически демонстрирует термин Контекст.

Как уже говорилось во всех других ответах, это часть синтаксиса стрелочной функции ES2015. В частности, это не оператор, это знак пунктуатора, который отделяет параметры от тела: ArrowFunction : ArrowParameters => ConciseBody. Например. (params) => { /* body */ }.

Как утверждали другие, обычные (традиционные) функции используют this из объекта, который вызывал функцию, (например, нажата кнопка). Вместо этого стрелочные функции используют this из объекта, определяющего функцию.

Рассмотрим две практически идентичные функции:

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


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

Приведенный ниже фрагмент демонстрирует фундаментальное различие между тем, что this представляет для каждой функции. обычная функция выводит [object HTMLButtonElement], тогда как стрелочная функция выводит [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 Стрелочные функции:

В javascript => - это символ выражения функции стрелки. Выражение стрелочной функции не имеет собственной this привязки и поэтому не может использоваться в качестве функции-конструктора. Например:

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

Правила использования стрелочных функций:

• Если есть ровно один аргумент, вы можете опустить круглые скобки аргумента.
• Если вы вернете выражение и сделаете это в одной строке, вы можете опустить {} и return.

Например:

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

Стрелочные функции JavaScript примерно эквивалентны лямбда-функциям в Python или блокам в Ruby. Это анонимные функции со своим собственным специальным синтаксисом и работают в контексте своей области действия. Это означает, что у них нет своего собственного this, а вместо этого они обращаются к нему из функции непосредственного включения.

Из стандарта ECMA:

ArrowFunction не определяет локальные привязки для аргументов, super, this или new.target. Любая ссылка на arguments, super, this или new.target в ArrowFunction должна разрешаться в привязку в лексически включающей среде. Обычно это будет функциональная среда непосредственно включающей функции.

Часто вы можете прочитать, что выражение функции стрелки - это компактная альтернатива традиционному выражению функции, это неверно. Стрелочная функция НЕ является сокращением для традиционной функции, они ведут себя иначе, чем традиционная функция.

Синтаксис

// Traditional Function
// Create their own scope inside the function
function (a){
  return a + 100;
}

// Arrow Function 
// Do NOT create their own scope
// (Each step along the way is a valid "arrow function")

// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
  return a + 100;
}

// 2. Remove the body braces and word "return" -- the return is implied.
(a) => a + 100;

// 3. Remove the argument parentheses (only valid with exactly one argument)
a => a + 100;