javascript - array.forEach.call vs array.map.call - Stack Overflow

admin管理员组

文章数量:1321439

To loop over the results of querySelectorAll in JavaScript, is one of the following more preferable than the other?

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

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

Essentially, I'm wondering if these each achieve the same result of providing access to each dom element returned from querySelectorAll. If so, what are reasons one might want to use one over the other?

To loop over the results of querySelectorAll in JavaScript, is one of the following more preferable than the other?

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

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

Essentially, I'm wondering if these each achieve the same result of providing access to each dom element returned from querySelectorAll. If so, what are reasons one might want to use one over the other?

• javascript
• arrays
• dictionary
• foreach
• selector

Share Improve this question Follow edited Nov 8, 2014 at 9:57 krivtom 24.9k1010 gold badges5252 silver badges5454 bronze badges asked Nov 8, 2014 at 9:56 Isaac GregsonIsaac Gregson 2,07511 gold badge2222 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

forEach operates on the original array elements. (If you want just iterate over all element you should use forEach)

map is running through your array, applying a function to each element, and emitting the result as a new array. (if you want to apply some changes to each element you should use map)

There is a subtle difference in which elements will be looped over between map and forEach. If the element in the array is undefined, it will not be invoked in map, but it will be invoked on forEach.

Obviously this distinction does not apply in the case of querySelectorAll, which will never return undefined in its results.

So the only difference between them is that of what the function returns. forEach has no return value. map executes a function on each member of the array and returns the results. So, for instance, you could do this:

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

This will return an array containing the value of every element selected by querySelectorAll('input').

So you should use map when that's what you want; otherwise, use forEach.

NB that Array.prototype.every and Array.prototype.some also exist; there may be times when they would be more appropriate.

forEach - only iterates the array elements.

map - iterates the array elements and returns a new array. for example..

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

temp is new array having id of all div elements;

本文标签： javascriptarrayforEachcall vs arraymapcallStack Overflow