JavaScript 中“=>”(由等于和大于形成的箭头)的含义是什么?它是什么示例代码兼容性说明

我知道运算符的含义大于或等于,但我在一些源代码中看到了。该运算符的含义是什么?>==>

代码如下:

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

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

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

答案 1

它是什么

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

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

您可以在 Mozilla 文档中阅读有关箭头函数的更多信息

来自 Mozilla 文档:

与函数表达式相比,箭头函数表达式(也称为胖箭头函数)具有较短的语法,并且在词法上绑定值(不绑定自己的 this参数supernew.target)。箭头函数始终是匿名的。这些函数表达式最适合非方法函数,它们不能用作构造函数。

关于箭头函数中的工作原理的说明this

箭头函数最方便的功能之一隐藏在上面的文本中:

箭头函数...词法绑定值(不绑定自己的值...thisthis

用更简单的术语来说,这意味着箭头函数保留了其上下文中的值,并且没有自己的 。传统函数可以绑定自己的值,具体取决于它的定义和调用方式。这可能需要大量的体操,如 等,从一个函数内部访问或操作另一个函数。有关此主题的更多信息,请参阅 Mozilla 文档中的说明和示例thisthisthisself = this;this

示例代码

示例(也来自文档):

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+)
  • 火狐 (v. 22+)
  • 边缘(v. 12+)
  • 歌剧 (v. 32+)
  • 安卓浏览器 (v. 47+)
  • Opera Mobile (v. 33+)
  • Chrome for Android (v. 47+)
  • Firefox for Android (v. 44+)
  • 野生动物园 (v. 10+)
  • iOS Safari (v. 10.2+)
  • 三星互联网 (v. 5+)
  • 百度浏览器 (v. 7.12+)

在以下版本中不受支持:

  • IE(通过 v. 11)
  • Opera Mini (至 v. 8.0)
  • 黑莓浏览器(通过 v. 10)
  • IE 移动版(通过 v. 11)
  • 适用于安卓的 UC 浏览器(通过 v. 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

语法比前一个更短:

// < 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
更多关于语法的信息

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