有人可以解释一些与 for.Each() 方法相关的事情吗？

Question

我正在学习 Javascript，目前正在阅读 w3schools 中关于它的所有小章节。 尽管我一直有一个很好的经验，但有时解释不够彻底，我很困惑。 我的问题不是 forEach 方法本身，而是随之而来的问题。 这里我将插入 w3schools 给出的代码：

 <p>Calls a function once for each array element.</p> <p id="demo"></p> <script> var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) { txt = txt + value + "<br>"; } </script>

主要有两点我不完全理解。 首先，行txt = txt + value + "<br>"; 让我有点困惑。 我很困惑为什么他们将txt添加到添加中，而不仅仅是txt = value + "<br>"; . 我的第二个困惑实际上是在同一行。 您会看到，每次执行代码时，显示的值都会发生变化。 当指定的所有内容都是 value 时，程序如何知道要更改value ？ 它不会只显示相同的值吗？ 我感谢每一个回应:)

Answer 1

从你的第二个困惑开始：

forEach function 将 function 作为其参数，在您的情况下，它是myFunction 。 基本上， forEach迭代它被调用的数组，并且对于每次迭代，即对于数组中的每个项目，它都会调用myFunction并将当前项目、它在数组中的索引以及数组本身作为 arguments 传递给这个 function . 因此myFunction被多次调用，每次都为其 arguments 使用不同的值。

关于你的第一个困惑：

演示的目标是构造一个字符串，该字符串由数组中的所有项目组成，每个项目后跟一个<br>元素。 其伪代码如下所示：

For every item in array:
    append item to txt
    append <br> to txt

到 append 到 JavaScript 中的txt你使用+运算符： txt = txt + value或简而言之txt += value 。

Answer 2

关于您的第一个困惑：目标是 append 将每个值添加到当前文本，因此您必须 append 将当前值（和<br> ）添加到当前文本，然后再附加它。 否则文本将被覆盖。 也可能是txt += value + "<br>"它将在内部执行您在示例中看到的操作。

其次，使用的值是myFunction的方法参数。 在numbers.forEach(myFunction)中使用 function 时，将为 numbers 数组中的每个值调用一次 function。

抱歉，如果我没有完全理解您的第二个困惑。

Answer 3

forEach 在遍历数组元素（其中有 5 个元素）时调用该方法（myFunction）。 例如，让我们插入值，这样您就可以看到它第一次运行时发生了什么：

• 我的函数（45,0，数字）

这是因为第一个元素的值为 45，它的索引为零，并且数组本身是数字。 下次运行时，它会调用：

• 我的函数（4,1，数字）

这是因为第二个元素的值是 4，它的索引是 1，而数组本身是数字......等等。

至于为什么说 txt = txt + value + "<br>"; 这样它就可以增量构建 txt 变量以包含所有这些变量，因为它一次处理一个变量。 让我们看看与上述相同的前两次会发生什么。

第一次运行时，txt 的值为 ""（无）。 所以会是

• txt = "" + 45 + "<br>";

第二次运行时，txt 的值现在是“45<br>”。 所以会是

• txt = "45<br>" + 4 + "<br>";

这使得 txt 现在为“45<br>4<br>”。 完成所有这些操作后，您会看到它将包含“45<br>4<br>9<br>16<br>25<br>”。

Answer 4

首先祝你学习JS。 我对您的建议是遵循MDN以更好地理解这些概念。 回到你的问题：

为什么他们将txt添加到添加中，而不仅仅是txt = value + "<br>";

因此，正如@charlietfl 在评论中指出的那样，只需执行txt = value + "<br>"; 每次迭代都会覆盖txt中的值，因此您最终将只有25 + "<br>" value中的数据

当所有指定的都是值时，程序如何知道更改值？

forEach 方法对数组中的每个元素调用一次 myFunction， myFunction的value参数保存数组中正在处理的当前元素的值， index保存数组中当前元素的索引， array保存forEach所在的完整数组function 已被调用。 因此，您的代码相当于：

 <p>Calls a function once for each array element.</p> <p id="demo"></p> <script> var txt = ""; var numbers = [45, 4, 9, 16, 25]; /* numbers.forEach(myFunction); The above for each can be replaced by this */ for (var index=0; index < numbers.length; index++){ myFunction(numbers[index],index,numbers); } document.getElementById("demo").innerHTML = txt; function myFunction(value, index, array) { txt = txt + value + "<br>"; } </script>

您可以在MDN - forEach和Medium上阅读有关forEach方法的更多信息

Answer 5

如果txt不在赋值的右侧，则代码将仅显示数字的最后一个元素的numbers — 25。

forEach方法为array中的每个value （在index处）调用一次myFunction ； 因此，除非numbers中的每个值都相同，否则该方法不会重复显示相同的值。