array.forEach.call vs array.map.call

array.forEach.call vs array.map.call

本文关键字：array call map vs forEach      更新时间：2023-09-26

要在 JavaScript 中循环访问querySelectorAll的结果，以下其中一个是否比另一个更可取？

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

从本质上讲，我想知道这些是否都实现了相同的结果，即提供对从querySelectorAll返回的每个 dom 元素的访问。如果是这样，人们可能想要使用一个而不是另一个的原因是什么？

forEach 对原始数组元素进行操作。(如果你只想迭代所有元素，你应该使用 forEach(

map 正在数组中运行，对每个元素应用一个函数，并将结果作为新数组发出。(如果你想对每个元素应用一些更改，你应该使用map(

元素

将在 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也存在;有时它们可能更合适。

forEach - 仅迭代数组元素。

map - 迭代数组元素并返回一个新数组。

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

temp 是具有所有div 元素 id 的新数组;

相关文章：