JavaScript 數組 forEach function 不工作？

Question

我嘗試在W33學校的javascript代碼中做一些更改，以了解forEach和map之間的區別，有沒有人可以告訴我為什么output仍然是這個代碼：

45,4,9,16,25

代替

90,8,18,32,50

是不是 forEach 意味着對這個數組中的每個元素調用一個 function ？ 我知道我不應該使用 return 因為 forEach 不返回有效結果。

 const numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); document.getElementById("demo").innerHTML = numbers; function myFunction(value, index, array) { value * 2; }

 <.DOCTYPE html> <html> <body> <h2>JavaScript Array.forEach()</h2> <p>Calls a function once for each array element.</p> <p id="demo"></p> </body> </html>

Answer 1

line value * 2執行計算，但它不對該計算的結果做任何事情。 您可以將該行更改為value = value * 2並將計算結果分配給value變量。 但是，這仍然不會更改數組中的值，因為value變量僅限於 function 的 scope。

這是因為當您將一個數字傳輸到另一個變量時，您只是在傳輸值，而不是引用。 IE

let a = 1;
let b = a;
a = 2; // a is 2, b is 1

這與傳輸引用的 arrays 和對象不同：

let a = [1];
let b = a;
a[0] = 2; // a[0] is 2, b[0] is 2

因此，修復代碼的一種方法可能是操作數組，即

numbers.forEach(myFunction);

function myFunction(value, index, array) {
  array[index] = value * 2;
}

這行得通。 但是，我會推薦map而不是forEach的簡單性。 Array#map使用每個 function 調用的返回值來替換數組中的每個項目。

numbers.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

Answer 2

function myFunction基本上什么都不做，它將當前值加倍並且什么都不做。 在您的情況下，您需要改變數組。 但是改變你正在遍歷的數組並不是一個好主意。

為了實現您的目標，我建議使用map function 創建一個新陣列。

const numbers = [45, 4, 9, 16, 25];

const doubledNumbers = numbers.map((value) => val * 2); // [90, 8, 18, 32, 50]
document.getElementById("demo").innerHTML = doubledNumbers;

Answer 3

這是因為您沒有用相乘的值重新設置數字的值。

您需要根據 map function 中的numbers[index]進行設置。

const numbers = [45, 4, 9, 16, 25];

numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = numbers;

function myFunction(value, index, array) {
  numbers[index] = value * 2;
}

JavaScript 數組 forEach function 不工作？

問題描述

3 個解決方案

解決方案1
2 2022-02-03 03:01:57

解決方案2
0 2022-02-03 03:00:33

解決方案3
0 2022-02-03 03:02:13

JavaScript 數組 forEach function 不工作？

問題描述

3 個解決方案

解決方案1 2 2022-02-03 03:01:57

解決方案2 0 2022-02-03 03:00:33

解決方案3 0 2022-02-03 03:02:13

解決方案1
2 2022-02-03 03:01:57

解決方案2
0 2022-02-03 03:00:33

解決方案3
0 2022-02-03 03:02:13