Что означает «=>» (стрелка, образованная из «равно и больше») в JavaScript?

Я знаю что>= оператор означает больше или равно, но я видел=> в некотором исходном коде. В чем смысл этого оператора?

Вот код:

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

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

    continueSave();
}).then(null, Components.utils.reportError);
 Mistalis23 дек. 2016 г., 11:55
Смотрите эту ссылку офункции стрелок.

Ответы на вопрос(12)

Решение Вопроса
Что это

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

Функции стрелок являются частью спецификации ECMAscript 6. Они еще не поддерживаются во всех браузерах, но поддерживаются частично или полностьюв узле 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 года он поддерживается в текущих версиях:

Chrome (v. 45+)Firefox (ст. 22+)Край (против 12+)Опера (ст. 32+)Браузер Android (версия 47+)Opera Mobile (версия 33+)Chrome для Android (версия 47+)Firefox для Android (версия 44+)Safari (версия 10+)iOS Safari (версия 10.2+)Интернет Samsung (версия 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 (нет принадлежности).

 Mistalis23 дек. 2016 г., 11:54
Спасибо за предоставлениеСписок несовместимых браузеров, :)
 Addem31 авг. 2018 г., 00:22
Похоже, это лямбда-выражение, да?
 Ed Cottrell13 мар. 2019 г., 06:05
@ gman Я отредактировал ответ. Спасибо за освещение проблемы. Опять же, если вы хотите добавить больше ясности, я был бы признателен. Если нет, то хорошего вечера.
 gman13 мар. 2019 г., 04:40
Извините, так как это неверный ответ, вводящий в заблуждение, и в конечном итоге будет путать людей ИМО. Неправильные ответы должны быть опущены. Я действительно не хочу переписывать ваш ответ. Я начал пытаться редактировать, но я думаю, что в конечном итоге переписать все это. Я счастлив превратить понижающее голосование в повышающее, когда ответ больше не является неправильным.
 Ed Cottrell13 мар. 2019 г., 04:14
@ Достаточно справедливо; эта часть моего ответа, возможно, была слишком упрощенной, предполагая, что простые функции и простые вызовы, такие какmyFunction(), Если у вас есть предложение о том, как мне лучше отличить это поведение от функций стрелок, я был бы признателен за этот вклад. (Я также был бы признателен, если бы вы пересмотрели понижающее голосование, предполагая, что новое понижающее голосование принадлежит вам.)
 Yo Apps04 янв. 2019 г., 10:09
Мне нравится этот пример, потому что он дает вам понимание того, как работает ".map"!
 Ed Cottrell13 мар. 2019 г., 05:12
@gman Вы указали на один момент, по которому вы не согласны с ответом, содержащим более 500 слов, ссылаясь (насколько я могу судить) на несколько необычные случаи, связанные с одним аспектом работы функций стрелок. Я думаю, что это довольно гиперболично, чтобы сказать, что «ответ неправильный, вводящий в заблуждение, и в конечном итоге приведет людей в замешательство». Вы можете придерживаться этого мнения, но, опять же, я спрашиваю, не хотите ли вы помочь мне (и другим пользователям), разъяснив проблему и научив всех нас, а не просто понизив голос.
 gman13 мар. 2019 г., 04:07
"Традиционная функция связывает свою собственную"не соответствует действительности. Традиционные функции не связываютthis, Они берут что угодноthis отправлено им. Тотthis является либо (а) глобальным объектом (б) неопределенным в строгом режиме (в), полученным из точки. оператор как вsomeObject.someFunction наборыthis вsomeObject (в) явно установлено с использованиемfunctionName.call или жеfunctionName.apply (г) установить черезbind.
 mtyson01 мая 2017 г., 21:39
TypeScript также, кажется, поддерживает это.
 Ed Cottrell13 мар. 2019 г., 05:35
@ gman Очень хорошо; Я перестану пытаться рассуждать с тобой об этом. Если вы хотели бы указать мне на любую ссылку, которая на самом деле проясняет различие между обычными функциями и функциями стрелки в отношении привязкиthis, пожалуйста, сделай так. В противном случае я буду взвешивать ваши комментарии и комментарии и двигаться дальше.
 gman13 мар. 2019 г., 05:24
Говорить кому-то, что «у традиционных функций есть свои собственные», вводит в заблуждение в крайнем смысле ИМО и приведет только к тому, что новые программисты на JavaScript будут вводить в заблуждение в течение длительного времени. Ваш ответ также устарел. «Функции стрелок являются частью спецификации ECMAscript 6, но не являются частью« нормального »JavaScript, используемого в большинстве браузеров сегодня». не верно в 2019 году

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

этот

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

с помощьюArrow Function можно записать как

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

MDN Docs

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

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

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

Вы также можете увидеть демонстрациюФункция стрелки с JavaScript в этом видео YouTube который демонстрирует практически термин Контекст.

Недоволен другими ответами. Ответ с наибольшим количеством голосов на 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)

Это известно как функция стрелки, часть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

DEMO

Другая удивительная вещьлексический this... Обычно вы делаете что-то вроде:

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

DEMO

MDN
Подробнее о синтаксисе

Для большего,вот довольно хороший ответ длякогда использовать функции стрелок.

 Wavesailor16 окт. 2018 г., 19:51
Было бы хорошо, чтобы обновить демо для использованияesfiddle.net какes6fiddle.net больше не работает

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

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

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

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

 Hanky Panky23 июл. 2014 г., 04:35
Добавление в качестве цитаты здесь действительно поможет вашему ответу.
 Kyle Falconer23 июл. 2014 г., 04:35
Вики, на которую я очень кратко ссылался, описывает, что это такое: «Выражение функции со стрелкой имеет более короткий синтаксис по сравнению с выражениями функций и лексически связывает это значение. Функции со стрелками всегда анонимны».
 djechlin23 июл. 2014 г., 04:34
Не забудьте включить достаточно информации, чтобы большинству читателей не приходилось углубляться в детали?
Это функции стрелок

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

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

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

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

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

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

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

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

addCustomer('Toby');

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

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

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

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

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

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

Полезный пример
var 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]

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

Совместимость браузераIE: пока не поддерживаетсяКрай: 12+ (все версии)Firefox: 22+Хром: 45+Сафари: 10+iOS Safari: 10.2+Браузер Android: 56+

Дополнительную актуальную информацию можно найти о совместимости браузераВот

Добавление простого примера CRUD с помощью функции 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)); 

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

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

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

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

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

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

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

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

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

Это означает, что они не имеют внутреннего метода [[Construct]] и, следовательно, не могут быть созданы, например,

var f = a => a;
f(123);  // 123
new f(); // TypeError: f is not a constructor
ES6 Функции стрелок:

В яваскрипте=> является символом выражения функции стрелки. Выражение функции стрелки не имеет своего собственного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));

Ваш ответ на вопрос