Question

我一直试图了解es6箭头功能。我读了一些介绍它的文章。但是我还没有完全掌握它。

例如我有这段代码：

sortedArticles(): Article[] {
    return this.articles.sort((a: Article, b: Article) => b.votes -  a.votes);
}

对下面的数组进行排序：

[
  new Article('Angular 2', 'http://angular.io', 3),
  new Article('Fullstack', 'http://fullstack.io', 2),
  new Article('Angular Homepage', 'http://angular.io', 1),
];

相同的代码在普通的旧js中看起来如何？我无法完全得到它。

Answer 1

如果你刚刚将箭头函数转换为function函数，它将会是这样的：

sortedArticles(): Article[] {
    return this.articles.sort(function(a: Article, b: Article) { return b.votes -  a.votes;});
// ---------------------------^^^^^^^^------------------------^^^-------------------------^^
}

...但请注意，除了ES2015之外还有更多（＃34; ES6＆＃34;）。 : Article[]部分称sortedArticles返回Article数组。（类似: Article和a上的b限定符。）这根本不是JavaScript。它看起来像TypeScript。

纯JavaScript版本只会删除那些类型注释：

sortedArticles() {
    return this.articles.sort(function(a, b) { return b.votes -  a.votes;});
}

但TypeScript＆＃34;＆＃34;胖箭＆＃34;功能的工作方式与ES2015的箭头功能基本相同，所以让我们继续讨论ES2015箭头功能：

箭头函数和function函数之间存在四个基本差异¹：

他们关闭了this，super以及其他一些事情，²他们没有像{{1}这样的版本函数做。（这样做的结果是，如果他们在可以使用function的上下文中定义，则可以使用super，super函数不能。{/ p>
他们可以有一个简洁的正文而不是一个详细的正文（但他们也可以有一个冗长的正文）。
它们不能用作构造函数。例如，您不能使用function箭头功能。这样做的结果是箭头函数不具有new属性（因为它仅在函数与prototype一起使用时才使用）。
< / LI>
箭头功能没有 generator 语法。例如，没有相当于new的箭头。

这三个功能实际上都是一样的，因为它们不会使用function *foo() { ... }或this：

arguments

（如果他们使用// A `function` function var f1 = function(x) { return x * 2; }; // An arrow function with a verbose body var f2 = x => { return x * 2; }; // An arrow function with a concise body var f3 = x => x * 2;或this，他们不会相同。）

请注意，简洁的主体在arguments之后没有{，并且必须包含单个顶级表达式（当然可以有子表达式），用作返回值。

¹你会发现有人告诉你那里的第五个：箭头功能没有名字。 That's a myth.箭头函数可以有名称;上面的箭头函数分别具有真实名称=>和f2。它不仅仅是具有名称的变量，而且功能也是如此。

²具体来说，they close over f3，this，super（运行时参数的自动伪数组）和{{1 }}

非常感谢CodingIntrigue在本答案的早期版本中指出了几个错误和遗漏。

Answer 2

如果您不熟悉箭头功能，或者比较复杂，可以使用JS Refactor，它是Visual Studio Code扩展。可以将箭头功能转换为普通功能。希望对别人有帮助。

Es6箭头功能正常js

2 个答案: