卡卡網(wǎng)

在 JavaScript 中，forEach和map是兩種最流行的處理數(shù)組的方法。這兩種方法的主要目的是遍歷數(shù)組。盡管它們看起來幾乎相同，但它們之間存在某些差異。在本文中，我們將討論JavaScript 中的map和forEach方法，我們還將通過它們之間的差異來了解何時使用它們。

forEach方法

forEach方法允許你通過遍歷數(shù)組的每個元素來執(zhí)行函數(shù)。重要的是要注意該forEach方法不返回任何內(nèi)容，因此，如果你嘗試獲取forEach方法的返回值，則會得到 undefined。相反，它允許你通過在數(shù)組的每個元素上應(yīng)用回調(diào)函數(shù)來修改現(xiàn)有數(shù)組的值。由于它允許你修改源數(shù)組本身，因此它是一個 mutator 方法。

我們查看以下示例以了解forEach方法的工作原理。

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray.forEach((num, index) => 
  output(`${num} x ${num} = ${num * num}`);
);

//the array hasn't changed
output(numberArray);
output(returnValue);

trying >>

示例中，我們計算數(shù)組所有元素的平方。對每個元素調(diào)用 forEach 方法，我們記錄它的平方。這個輔助方法的返回值被忽略，原始數(shù)組不會改變。forEach的返回值始終為undefined。

map方法

map方法與forEach方法非常相似——它允許你為數(shù)組的每個元素執(zhí)行一個函數(shù)。但不同之處在于 map 方法使用該函數(shù)的返回值創(chuàng)建了一個新數(shù)組。map通過在源數(shù)組的每個元素上應(yīng)用回調(diào)函數(shù)來創(chuàng)建一個新數(shù)組。由于map不改變源數(shù)組，我們可以說它是不可變的方法。

我們用map修改上面的示例。

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray.map((num) => num * num)

//view the results
output(numberArray);
output(returnValue);

可以看到，numberArray數(shù)組保持不變，但map返回值是一個新數(shù)組，該數(shù)組是通過將 square 函數(shù)應(yīng)用于數(shù)組的每個元素構(gòu)建的。

map 函數(shù)的一個優(yōu)點是它是可連接的。這意味著你可以連續(xù)調(diào)用多個map操作。這是一個連接示例，我們將每個數(shù)字乘以 2，將它們轉(zhuǎn)換為字符串，然后在每個數(shù)字上加上一個美元符號。

//a logging utility output text to the web page
const output=(string)=>document.body.innerHTML+=`${string}<br/>`;

//an array of numbers
let numberArray = [1, 2, 3, 4, 5];

//output the square of each number
let returnValue = numberArray
  .map((num) => num * 2)
  .map((num) => num.toString())
  .map((string) => "$"+string);

//view the results
output(numberArray);
output(returnValue);

輸出結(jié)果

1,2,3,4,5
$2,$4,$6,$8,$10

trying >>

map 和 forEach方法之間的差異

map和forEach之間的主要區(qū)別在于，map方法通過對數(shù)組的每個元素應(yīng)用回調(diào)函數(shù)來返回一個新數(shù)組，而forEach方法不返回任何內(nèi)容。

你可以使用forEach方法來改變源數(shù)組，但這并不是它真正的用途。相反，當你需要對數(shù)組的每個元素執(zhí)行某些操作時，它非常有用。

而map方法用于創(chuàng)建一個新數(shù)組，它是可連接的，你可以一個接一個地調(diào)用多個map操作。

forEach方法不返回任何內(nèi)容，因此你不能將它與任何其他方法連接起來——它不可連接。

我應(yīng)該使用哪一個，map還是forEach？

現(xiàn)在，歸結(jié)為這個問題，如何決定是否應(yīng)該使用map還是forEach方法？

如果你打算通過應(yīng)用某個函數(shù)來更改數(shù)組元素，則應(yīng)該使用map方法，因為它不會修改原始數(shù)組并返回一個新數(shù)組。這樣，原來的數(shù)組就完好無損。而如果您想遍歷數(shù)組的所有元素并且不需要返回的數(shù)組，請使用forEach方法。

除此之外，功能非常相似。

結(jié)論

今天，我們討論了 JavaScript 中兩個有用的方法：map和forEach. 我們通過幾個例子了解了它們之間的差異，并給出了一些使用建議，希望對大家有所幫助。

標簽: map方法  forEach方法