有人可以解釋一些與 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中的每個值都相同，否則該方法不會重復顯示相同的值。