JavaScript 中的“=>”(由等于和大于组成的箭头)是什么意思?

IT技术 javascript syntax ecmascript-6 arrow-functions
2020-12-19 00:58:47

我知道>=运算符的意思是大于或等于,但我=>在一些源代码中看到过。那个运算符是什么意思?

这是代码:

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

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

    continueSave();
}).then(null, Components.utils.reportError);
6个回答

这是什么

这是一个箭头函数。箭头函数是 ECMAscript 6 引入的一种简短语法,其使用方式与使用函数表达式的方式类似。换句话说,您可以经常使用它们代替诸如function (foo) {...}. 但它们有一些重要的区别。例如,它们不绑定自己的值this(见下文讨论)。

箭头函数是 ECMAscript 6 规范的一部分。并非所有浏览器都支持它们,但它们在 Node v. 4.0+和截至 2018 年使用的大多数现代浏览器中得到部分或完全支持。(我在下面提供了部分支持浏览器列表)。

您可以在关于箭头函数的 Mozilla 文档中阅读更多内容

从 Mozilla 文档:

相比箭头函数表达式(也称为脂肪箭头功能)具有更短的语法函数表达式和词法结合this值(不结合其自身的thisargumentssuper,或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 中使用箭头函数,但浏览器支持参差不齐。

浏览器对此功能的支持已经有了很大改进,但对于大多数基于浏览器的使用来说,它仍然不够广泛。截至 2017 年 12 月 12 日,当前版本支持:

  • 铬 (v. 45+)
  • Firefox (v. 22+)
  • 边缘 (v. 12+)
  • 歌剧 (v. 32+)
  • Android 浏览器 (v. 47+)
  • Opera Mobile (v. 33+)
  • 安卓版 Chrome (v. 47+)
  • Firefox for Android (v. 44+)
  • Safari (v. 10+)
  • iOS Safari (v. 10.2+)
  • 三星互联网 (v. 5+)
  • 百度浏览器 (v. 7.12+)

不支持:

  • IE(通过第 11 版)
  • Opera Mini(通过 v. 8.0)
  • 黑莓浏览器(通过第 10 版)
  • IE 移动版(通过第 11 版)
  • 适用于 Android 的 UC 浏览器(通过 v. 11.4)
  • QQ(通过v.1.2)

您可以在CanIUse.com(无附属关系)上找到更多(和更多最新)信息

看起来这是一个 lambda 表达式,是吗?
2021-02-10 00:58:47
TypeScript 似乎也支持它。
2021-02-19 00:58:47
想提一下浏览器兼容性,我使用 ES6/ES7 箭头函数和其他与 IE11 不兼容的特性,但我使用 Gulp 或 Webpack 以及 Babel 将 ES6 转换为 ES5,因此它可以在 IE11 中运行。因此,如果您需要 IE11 支持并且不介意设置 Babel,那么就去做吧。
2021-02-24 00:58:47

这被称为箭头函数,是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

演示

另一个很棒的事情是词法 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();

演示

MDN
有关语法的更多信息

有关更多信息,这里有一个关于何时使用箭头函数的很好的答案

最好更新演示以使用esfiddle.net,因为es6fiddle.net不再运行
2021-02-28 00:58:47

这些是箭头函数

也称为胖箭头函数它们是编写函数表达式的一种简洁明了的方式,例如function() {}.

箭头函数可以在定义函数时消除function,return的需要{}它们是单行的,类似于 Java 或 Python 中的 Lambda 表达式。

没有参数的示例

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

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

如果需要在同一个箭头函数中执行多个语句,则需要在本例queue[0]中用大括号括起来{}在这种情况下,不能省略 return 语句。

带有 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 值。箭头函数总是匿名的。

将其添加为此处的引用将真正有助于您的回答。
2021-02-18 00:58:47
介意包含足够的信息,以便大多数读者不必深入了解吗?
2021-02-21 00:58:47
我链接到的 wiki 非常简洁地描述了它是什么:“与函数表达式相比,箭头函数表达式的语法更短,并且在词法上绑定了 this 值。箭头函数总是匿名的。”
2021-02-22 00:58:47

只是添加另一个示例,说明 lambda 可以在不使用 map 的情况下执行的操作:

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