将 ECMAScript 6 的箭头函数转换为常规函数

Question

我有如下箭头函数

if( rowCheckStatuses.reduce((a, b) => a + b, 0) ){}

rowCheckStatuses 是 1 和 0 的数组，此箭头函数将它们全部相加以产生一个数字。这个数字作为一个布尔值来确定数组中是否至少有一个“1”。

问题是，我真的不明白箭头函数是如何工作的，我的 IDE 认为它是错误的语法并且拒绝检查我文档的其余部分是否有语法错误。

我该如何将其转换为常规函数来缓解这两个问题？

Answer 1

箭头函数通常可以通过替换来转换

(<args>) => <body>

和

function(<args>) { return <body>; }

所以你的

rowCheckStatuses.reduce(function(a, b) { return a + b; }, 0)

此规则也有例外，因此如果您想了解所有差异，请务必阅读 arrow functions。你还应该注意到箭头函数有一个词法 this.

Answer 2

您可以将其重构为：

if( rowCheckStatuses.reduce(function(a, b){return a + b}, 0)

初始累加器不是必需的（除非您希望数组有时为空），它可以是：

if( rowCheckStatuses.reduce(function(a, b){return a + b})

This number acts as a boolean to determine whether or not there is at least one "1" in the array

使用起来可能会更快（也更清晰）：

if( rowCheckStatuses.some(function(a){return a == 1}))

如果 rowCheckStatuses 中有任何 1，它将 return true 并且将 return一种是遇到。另一种选择是 indexOf:

if( rowCheckStatuses.indexOf(1) != -1)

很多选择。

Answer 3

用常规函数替换箭头函数通常没有问题：

var f = x => y;
var g = function(x) { return y; }

或者，在您的具体示例中：

rowCheckStatuses.reduce((a, b) => a + b, 0);
rowCheckStatuses.reduce(function(a, b) { return a + b; }, 0);

但是，请注意 例外情况：

箭头函数不绑定 this 值。因此，在箭头函数中访问 this 可能 return 封闭执行上下文的 this:

的值

function MyClass() {}
MyClass.prototype.f = () => this;
MyClass.prototype.g = function() { return this; }

myClass = new MyClass();
console.log(myClass.f()); // logs `Window`
console.log(myClass.g()); // logs `myClass`

箭头函数也无法访问本地 arguments 对象。在箭头函数中访问 arguments 可能 e。 G。 return 一个封闭函数的 arguments:

function test() {

  var f = () => arguments;
  var g = function() { return arguments; }
  
  console.log(f()); // logs test's arguments
  console.log(g()); // logs g's arguments
}

test('x');

new.target 和 super 也是如此。另见 What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

将 ECMAScript 6 的箭头函数转换为常规函数

Converting ECMAScript 6's arrow function to a regular function

javascript

ecmascript-6

arrow-functions