javascript - 将函数作为参数传递给 JavaScript 中的迭代函数

Question

阅读 Eloquent Javascript，其中一个示例是

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

let labels = [];
repeat(5, x => {
  labels.push(`Unit ${x + 1}`); //what is happening here?
});

console.log(labels);
// → ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"]

有人可以解释一下重复调用中的迭代是如何工作的吗？我们正在创建一个函数 (x) 并将其作为操作传入，但它如何知道它正在进行什么迭代以及推送到数组的数值来自哪里？

Answer 1

让我们退一步看一个更简单的示例。

这是您要多次调用的函数:

function doSomething(x) {
  labels.push(`Unit ${x + 1}`);
}

它接受一个用于创建字符串的参数，并将该字符串推送到数组中。

当然，使用循环很容易做到这一点:

for (let i = 0; i < 5; i++) {
  doSomething(i);
}

这里应该很明显，我们将循环变量 (i) 传递给我们的函数，该函数被分配给参数 x。这与执行以下操作相同:

doSomething(0);
doSomething(1);
...

此代码不可重复使用。假设我们想要调用该函数不同的次数，而不仅仅是(并且总是)五次。
我们可以将循环放在函数本身中，以次数作为参数:

function repeat(n) {
  for (let i = 0; i < n; i++) {
    doSomething(i);
  }
}

现在我们可以将函数调用为 repeat(5) 或 repeat(10)，它会调用 doSomething 多次。

但是，现在我们想要多次调用另一个函数。我们可以创建第二个 repeat 函数(当然名称不同)，但这并不理想。
我们可以更改 repeat 以接受第二个参数，其值应该是函数值，而不是直接在 repeat 中引用 doSomething。这是可能的，因为函数的值与 JavaScript 中的任何其他值一样:

function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

现在我们可以重用repeat来调用我们想要的任何函数:

repeat(5, doSomething)
repeat(10, doSomethingElse)

这就是上面的代码所做的事情。