JavaScript for循环内return导致仅首次迭代执行？如何实现每轮结果输出/返回

当前代码只执行首次循环就退出，根源是return sol语句被写在了for循环的块作用域内部。JavaScript执行到return语句时，会立刻终止当前函数的全部执行流程，将指定值返回给调用处，循环根本没有机会执行后续的迭代。
除此之外原代码还存在两个隐患：

• 未对sol做变量声明，会意外挂到全局作用域造成污染
• 循环到i=0时，原有模板会生成带负数瓶数的不合理歌词

方案1：逐次打印每轮迭代的结果 #

不需要集中返回值的场景下，直接把循环内的return替换为打印语句，让每轮生成的歌词实时输出到控制台即可：

function annoyingSong(start){
 for (let i = start; i >= 0; i--) {
  // 声明局部变量避免全局污染，同时补全边界歌词的特殊处理
  const sol = i === 0 
    ? "No more bottles of soda on the wall, no more bottles of soda. Go to the store and buy some more, " + start + " bottles of soda on the wall"
    : `${i} bottles of soda on the wall, ${i} bottles of soda, take one down pass it around ${i-1} bottles of soda on the wall`
  // 循环内直接打印，不触发函数提前退出
  console.log(sol);
 }
}

// 调用后会逐行输出从20瓶到0瓶的全部歌词
annoyingSong(20)

方案2：收集全量结果后一次性返回 #

如果需要拿到所有迭代的结果做后续处理，可以在循环外定义一个空数组，每轮生成的歌词依次推入数组，等所有循环执行完毕后再统一返回数组即可：

function annoyingSong(start){
 // 循环外初始化空数组收集所有歌词
 const lyricContainer = [];
 for (let i = start; i >= 0; i--) {
  const sol = i === 0 
    ? "No more bottles of soda on the wall, no more bottles of soda. Go to the store and buy some more, " + start + " bottles of soda on the wall"
    : `${i} bottles of soda on the wall, ${i} bottles of soda, take one down pass it around ${i-1} bottles of soda on the wall`
  // 把当前歌词推入数组，不触发return
  lyricContainer.push(sol);
 }
 // 等循环全部跑完，再把整个收集结果返回
 return lyricContainer;
}

// 打印返回的全量歌词数组
console.log(annoyingSong(20))

• 不要在循环内部放置过早的return语句，这会直接中断函数执行流程，让后续所有迭代都无法运行
• 循环变量到0的时候，注意调整歌词逻辑，避免出现负数瓶数的不合理文案
• 所有临时生成的变量都要用let/const声明为局部变量，避免意外污染全局作用域

内容的提问来源于stack exchange，提问作者Vinnie Taormina