forEach()在javascript中使用变量时的逻辑

Question

代码的结果是：

test0: apple
1: orange
2: cherry

我想知道为什么我的文本变量等于"0"在第二个和第三个循环中，我希望之前的值被添加到文本变量的初始值中，有人能解释一下文本变量发生了什么，以及在这个例子中forEach的逻辑是什么吗？

let text = "test";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
document.getElementById("demo").innerHTML = text;
function myFunction(item, index) {
text += index + ": " + item + "<br>";
}

<p id="demo"></p>

Answer 1

循环运行时，只添加一次文本test。在开始和之后，变量text被更新。

如果你想在每次迭代中添加，只需将其保存在一个单独的变量中并继续添加。

let text = "";
let test = "test";
const fruits = ["apple", "orange", "cherry"];
fruits.forEach(myFunction);
document.getElementById("demo").innerHTML = text;
function myFunction(item, index) {
text = text + test + index + ": " + item + "<br>";
}

<p id="demo"></p>

Answer 2

您的代码按预期工作。使用innerText而不是innerHTML可能会阐明的情况

let text = "test";
const fruits = ["apple", "orange", "cherry"];
//fruits.forEach(myFunction);
document.getElementById("demo").innerText = text;
function myFunction(item, index) {
text += index + ": " + item + "<br>";
document.getElementById("demo").innerText = text;
console.log(item,index);
}
window.setTimeout( myFunction.bind(null,fruits.shift(),0), 1000);
window.setTimeout( myFunction.bind(null,fruits.shift(),1), 2000);
window.setTimeout( myFunction.bind(null,fruits.shift(),2), 3000);

<p id="demo"></p>