JavaScript中“ =>”（等于或大于的箭头）的含义是什么？

本文翻译自：What's the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?

I know that the >= operator means more than or equal to, but I've seen => in some source code. 我知道>=运算符的含义是大于或等于，但我在某些源代码中已经看到=> 。 What's the meaning of that operator? 该运算符是什么意思？

Here's the code: 这是代码：

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

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

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

---

#1楼

参考：https://stackoom.com/question/1gTr1/JavaScript中-gt-等于或大于的箭头-的含义是什么

---

#2楼

This would be the "arrow function expression" introduced in ECMAScript 6. 这将是ECMAScript 6中引入的“箭头函数表达式”。

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

For historical purposes (if the wiki page changes later), it is: 出于历史目的（如果Wiki页面稍后更改），则为：

An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value. 箭头函数表达式的语法比函数表达式短，并且在词法上绑定了此值。 Arrow functions are always anonymous. 箭头函数始终是匿名的。

---

#3楼

What It Is 这是什么

This is an arrow function. 这是一个箭头功能。 Arrow functions are a short syntax, introduced by ECMAscript 6, that can be used similarly to the way you would use function expressions. 箭头函数是ECMAscript 6引入的一种短语法，可以与使用函数表达式的方式类似地使用。 In other words, you can often use them in place of expressions like function (foo) {...} . 换句话说，您经常可以使用它们代替诸如function (foo) {...}类的表达式。 But they have some important differences. 但是它们有一些重要的区别。 For example, they do not bind their own values of this (see below for discussion). 例如，它们不与他们的自身价值this （见下面的讨论）。

Arrow functions are part of the ECMAscript 6 specification. 箭头功能是ECMAscript 6规范的一部分。 They are not yet supported in all browsers, but they are partially or fully supported in Node v. 4.0+ and in most modern browsers in use as of 2018. (I've included a partial list of supporting browsers below). 并非所有浏览器都支持它们，但是在Node v.4.0 +和截至2018年使用的大多数现代浏览器中都部分或完全支持它们。（我在下面提供了部分支持的浏览器列表）。

You can read more in the Mozilla documentation on arrow functions . 您可以在Mozilla文档的箭头功能中阅读更多内容 。

From the Mozilla documentation: 从Mozilla文档中：

An arrow function expression (also known as fat arrow function) has a shorter syntax compared to function expressions and lexically binds the this value (does not bind its own this , arguments , super , or new.target ). 相比箭头函数表达式（也称为脂肪箭头功能）具有更短的语法函数表达式和词法结合this值（不结合其自身的this ， arguments ， super或new.target ）。 Arrow functions are always anonymous. 箭头函数始终是匿名的。 These function expressions are best suited for non-method functions and they can not be used as constructors. 这些函数表达式最适合于非方法函数，因此不能用作构造函数。

A Note on How this Works in Arrow Functions 关于如何注意this在箭厂的功能

One of the most handy features of an arrow function is buried in the text above: 上面的文本中隐藏了箭头功能最方便的功能之一：

An arrow function... lexically binds the this value (does not bind its own this ...) 箭头函数...按词法绑定this值（不绑定自身的this ...）

What this means in simpler terms is that the arrow function retains the this value from its context and does not have its own this . 用简单的术语来说，这意味着arrow函数从其上下文保留了this值，而没有自己的this 。 A traditional function may bind its own this value, depending on how it is defined and called. 传统函数可以根据其定义和调用方式绑定自己的this值。 This can require lots of gymnastics like self = this; 这可能需要很多体操，例如self = this; , etc., to access or manipulate this from one function inside another function. 等，以从另一个功能中的一个功能访问或操作this功能。 For more info on this topic, see the explanation and examples in the Mozilla documentation . 有关此主题的更多信息，请参见Mozilla文档中的解释和示例 。

Example Code 范例程式码

Example (also from the docs): 示例（同样来自文档）：

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]

---

Notes on Compatibility 兼容性说明

You can use arrow functions in Node, but browser support is spotty. 您可以在Node中使用箭头功能，但浏览器支持不一。

Browser support for this functionality has improved quite a bit, but it still is not widespread enough for most browser-based usages. 浏览器对此功能的支持已经改善了很多，但是对于大多数基于浏览器的用法来说，它仍然不够广泛。 As of December 12, 2017, it is supported in current versions of: 自2017年12月12日起，当前版本的软件支持：

• Chrome (v. 45+) Chrome（v。45+）
• Firefox (v. 22+) Firefox（22岁以上版本）
• Edge (v. 12+) 边缘（v。12+）
• Opera (v. 32+) 歌剧（v。32+）
• Android Browser (v. 47+) Android浏览器（v。47+）
• Opera Mobile (v. 33+) Opera Mobile（v。33+）
• Chrome for Android (v. 47+) Chrome for Android（v。47+）
• Firefox for Android (v. 44+) 适用于Android的Firefox（版本44或更高）
• Safari (v. 10+) Safari（10岁以上）
• iOS Safari (v. 10.2+) iOS Safari（10.2以上版本）
• Samsung Internet (v. 5+) 三星互联网（v。5+）
• Baidu Browser (v. 7.12+) 百度浏览器（7.12+）

Not supported in: 不支持：

• IE (through v. 11) IE（通过第11版）
• Opera Mini (through v. 8.0) Opera Mini（通过8.0版）
• Blackberry Browser (through v. 10) 黑莓浏览器（通过第10版）
• IE Mobile (through v. 11) IE Mobile（通过v。11）
• UC Browser for Android (through v. 11.4) 适用于Android的UC浏览器（通过11.4版）
• QQ (through v. 1.2) QQ（通过1.2版）

You can find more (and more current) information at CanIUse.com (no affiliation). 您可以在CanIUse.com上找到更多（和更多最新信息）（无隶属关系）。

---

#4楼

I've read, this is a symbol of Arrow Functions in ES6 我读过，这是ES6中Arrow Functions的象征

this 这个

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

using Arrow Function can be written as 使用Arrow Function可以写成

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

MDN Docs MDN文件

---

#5楼

That's known as an Arrow Function, part of the ECMAScript 2015 spec ... 这被称为箭头功能，是ECMAScript 2015规范的一部分 ...

 var foo = ['a', 'ab', 'abc']; var bar = foo.map(f => f.length); console.log(bar); // 1,2,3 

Shorter syntax than the previous: 语法比以前短：

 // < ES6: var foo = ['a', 'ab', 'abc']; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3 

DEMO 演示

The other awesome thing is lexical this ... Usually, you'd do something like: 其他真棒事情是词汇 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(); 

But that could be rewritten with the arrow like this: 但这可以用如下箭头重写：

 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 MDN
More on Syntax 有关语法的更多信息

For more, here's a pretty good answer for when to use arrow functions. 有关更多信息， 这是 何时使用箭头功能的一个很好的答案。

---

#6楼

just to add another example of what a lambda can do without using map: 只是要添加另一个示例，说明lambda无需使用地图即可执行的操作：

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