array.forEach.call vs array.map.call

Question

要在JavaScript中循環查詢querySelectorAll的結果，以下哪一個比另一個更優選？

[].forEach.call(document.querySelectorAll('div'){
  // do something
})

[].map.call(document.querySelectorAll('div'){
  // do something
})

本質上，我想知道這些是否實現了從querySelectorAll返回的每個dom元素提供訪問的相同結果。 如果是這樣，那么一個人可能想要使用另一個的原因是什么？

Answer 1

forEach對原始數組元素進行操作。 （ 如果你想迭代所有元素，你應該使用forEach ）

map正在運行您的數組，將函數應用於每個元素，並將結果作為新數組發出。 （ 如果你想對每個元素應用一些更改，你應該使用map ）

Answer 2

forEach - 僅迭代數組元素。

map - 迭代數組元素並返回一個新數組。 例如..

var temp = [].map.call(document.querySelectorAll('div'), function(e){
  return e.id;
  // do something
})

temp是具有所有div元素的id的新數組;

Answer 3

在map和forEach之間，元素將循環有一個細微的差別。 如果數組中的元素undefined ，則不會在map中調用它，但會在forEach上調用它。

顯然，這種區別不適用於querySelectorAll ，它的結果永遠不會返回undefined 。

所以它們之間的唯一區別在於函數返回的內容。 forEach沒有返回值。 map對數組的每個成員執行一個函數並返回結果。 所以，例如，你可以這樣做：

var values = [].map.call(document.querySelectorAll('input'), function(el) {
    return el.value;
});

這將返回一個數組，其中包含querySelectorAll('input')選擇的每個元素的value 。

所以你應該使用map ，這就是你想要的; 否則，使用forEach 。

注意， Array.prototype.every和Array.prototype.some也存在; 有時候他們會更合適。