Ответ 1

Что это

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

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

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

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

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

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

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

Функция стрелки... лексически связывает значение this (не привязывает свое собственное this...)

Проще говоря, это означает, что функция стрелки сохраняет значение 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 года он поддерживается в текущих версиях:

• Хром (против 45+)
• Firefox (против 22+)
• Край (против 12+)
• Опера (ст. 32+)
• Браузер Android (версия 47+)
• Opera Mobile (версия 33+)
• Chrome для Android (версия 47+)
• Firefox для Android (версия 44+)
• Сафари (версия 1 0+)
• iOS Safari (версия 10. 2+)
• Интернет Samsung (v. 5+)
• Baidu Browser (v. 7. 12+)

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

Для исторических целей (если страница wiki изменяется позже), это:

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

Ответ 4

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

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

Ответ 5

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

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

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

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

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

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

Ответ 6

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

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

• Они связывают значение this. Как объясняется спецификация,

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

  Даже если ArrowFunction может содержать ссылки на super, функциональный объект, созданный на этапе 4, не превращается в метод посредством выполнение MakeMethod. Функция ArrowFunction, которая ссылается на superвсегда содержится внутри функции, не связанной с стрелкой, и необходимой для реализации super доступно через область, которая захваченный функциональным объектом функции ArrowFunction.

• Они являются неконструкторами.

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

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

Ответ 7

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

this

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

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

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

Документы MDN

Ответ 8

Добавление простого примера 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)); 

Ответ 9

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

Ответ 10

ES6 Arrow:

В 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

Ответ 11

Недоволен другими ответами. Ответ с наибольшим количеством голосов на 2019/3/13 фактически неверен.

Короткий лаконичный вариант того, что => означает, что ярлык написание функции и для его связывания с током 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(funcitonToBind, valueToUseForThis) {
  return function(...args) {
    functionToBind.call(valueToUseForThis, ...args);
  };
}

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

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

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

Ответ 12

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

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

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

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

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

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

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

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

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

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

Этот SomeMethod имеет локальную переменную context. Теперь, поскольку 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();

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

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