for-loop周围的花括号改变输出

Question

在关于高阶函数的Eloquent Javascript章节中,我遇到了这个例子:

function reduce(array, combine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++)
    current = combine(current, array[i]);
  return current;
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// ? 10

当for循环重写时包含,我认为是可选的,花括号,如:

function reduce(array, combine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = combine(current, array[i]);
    return current;
  }
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
  return a + b;
}, 0));
// ? 1

结果只有1而不是预期的10.这里有什么大括号来改变输出？

Answer 1

花括号正在按照你的要求进行:因为你return在for循环中包含了语句:

function reduce(array, combine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = combine(current, array[i]);
    return current;
  }
}

循环没有达到预期的效果,因为返回退出循环,实际上在返回值时起作用,因此只有数组的第一个元素的值:1折叠到var current和输出1.鉴于:

function reduce(array, combine, start) {
  var current = start;
  for (var i = 0; i < array.length; i++) {
    current = combine(current, array[i]);
  }
  return current;
}

返回预期的输出:10因为for在返回值之前折叠所有数组元素.

Answer 2

您需要将return语句移动到for循环的块之外,因为return语句会立即结束函数和循环.

for (var i = 0; i < array.length; i++) {
    current = combine(current, array[i]);
}
return current;

function reduce(array, combine, start) {
    var current = start;
    for (var i = 0; i < array.length; i++) {
        current = combine(current, array[i]);
    }
    return current;
}

console.log(reduce([1, 2, 3, 4], function(a, b) {
    return a + b;
}, 0));