JavaScript中forEach()与变量结合时的执行逻辑疑问

嘿，我来帮你把这个问题理得明明白白的～

首先要纠正一个误解：你的代码里text变量从来没有变成空字符串，第二次和第三次循环都是基于上一次的结果继续拼接的，咱们一步步拆解整个执行过程：

代码执行的完整步骤 #

1. 初始状态：

   let text = "test"; 
   const fruits = ["apple", "orange", "cherry"]; 
   

   这时候text的初始值是"test"，数组fruits包含三个元素。

2. forEach的执行逻辑：
   fruits.forEach(myFunction)会按顺序遍历数组的每一个元素，对每个元素调用一次myFunction回调函数，每次调用会自动传入两个核心参数：当前遍历的元素（item）、当前元素的索引（index）。

3. 每次循环中text的变化：

   • 第一次循环（索引0，元素apple）：
     执行text += index + ": " + item + "<br>"，等价于：

     text = "test" + "0: apple<br>"
     

     此时text的值变为："test0: apple<br>"

   • 第二次循环（索引1，元素orange）：
     基于上一次的text值继续拼接：

     text = "test0: apple<br>" + "1: orange<br>"
     

     此时text的值变为："test0: apple<br>1: orange<br>"

   • 第三次循环（索引2，元素cherry）：
     再次基于前一次的结果拼接：

     text = "test0: apple<br>1: orange<br>" + "2: cherry<br>"
     

     最终text的值是："test0: apple<br>1: orange<br>2: cherry<br>"

4. 页面显示结果：
   当你把text赋值给demo元素的innerHTML时，浏览器会把<br>标签解析成换行，所以页面显示出来就是：

   test0: apple
   1: orange
   2: cherry
   

   这就是你看到的运行结果啦。

为什么你会误以为text在第二次/第三次循环中是空的？ #

大概率是调试时的误解～比如误把回调函数里的某个临时变量当成了text，或者调试断点的时机不对。你可以在myFunction里加一句console.log(text)，就能清楚看到每次循环后text都是持续追加的状态。

再补充一点forEach的核心特性 #

• forEach会严格按照数组的索引顺序遍历元素，不会跳过任何元素（除非你在回调里用return，但return只会终止当前这一次回调，不会停止整个遍历）
• 回调函数可以访问并修改外部作用域的变量（比如这里的text），因为它们处于同一个作用域链中，这也是你的代码能实现追加效果的核心原因。

内容的提问来源于stack exchange，提问作者judaki.reza