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})

此数字作为布尔值来确定是否至少有一个＆＃34; 1＆＃34;在数组中

使用它可能更快（更清晰）：

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

如果 rowCheckStatuses 中有任何1，将返回 true ，并在遇到一个时立即返回。另一种选择是 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可能会返回封闭执行上下文的值this：

＆＃13;

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`

＆＃13;

箭头功能也无法访问本地arguments对象。在箭头函数中访问arguments可能是e。 G。返回封闭函数的arguments：

＆＃13;

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');

＆＃13;

同样适用于new.target和super。另请参阅What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?

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

3 个答案: