javascript - for循环周围的花括号改变输出

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

大括号按照您的要求执行:因为您在 for 循环中包含了 return 语句:

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

循环没有按预期停止，因为 return 退出循环，实际上在返回值时起作用，因此只有数组第一个元素的值: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 在返回值之前折叠所有数组元素。