Question

我知道我可以通过简单的for循环执行此操作但我正在尝试更好地理解如何使用forEach。

我要做的是，使用来自querySelectorAll（）的“a”元素列表来获取具有href属性的数组。有什么问题？

var links = document.querySelectorAll("a");
function get_hrefs(links){
    var links_array = links.forEach(function(elem){ return elem.getAttribute("href"); });
    return links_array;
}
get_hrefs(links);

Answer 1

使用slice获取数组，如下所示：

var links = Array.prototype.slice.call(document.querySelectorAll("a"));
var links_array = links.map(function(elem){ return elem.getAttribute("href"); });

至于更新的问题：

var links = document.querySelectorAll("a");

function get_hrefs(links){
    links = Array.prototype.slice.call(links);

    return links.map(function(elem){ return elem.getAttribute("href"); });;
}

get_hrefs(links);

Answer 2

您正在寻找map而非forEach，并且您需要以不同方式调用它，因为querySelectorAll会返回NodeList，而不是arary：

var links = document.querySelectorAll("a");
var links_array = Array.prototype.map.call(links, function(e){
    return e.getAttribute("href");
});

如果你真的想要属性值那就是。如果您想要解析href，那么：

var links = document.querySelectorAll("a");
var links_array = Array.prototype.map.call(links, function(e){
    return e.href;
});

更新你的更新问题，函数将收到links并且不一定知道它是什么：上面的代码既适用于真正的数组，也适用于类似数组的内容，例如返回的NodeList querySelectorAll。所以不需要做任何改变来处理它。

Answer 3

如果您想使用foreach，因为querySelectorAll不会返回数组，因此您可以执行以下操作：

var links = document.querySelectorAll("a");
var links_array = [];
[].forEach.call(
  links, 
  function(elem){
    links_array.push(elem.getAttribute("href"));
  }
);

Answer 4

var hrefArray = [];
var links = document.querySelectorAll("a");
var Array.prototype.forEach.call(links, function(elem){ hrefArray.push(elem.getAttribute("href")); });

让forEach将元素推送到空数组中。 forEach只是迭代所有元素。你做的是你的决定。

其他用户指向使用map。这个功能很适合这个问题。然而，问题是要更好地理解forEach。

Cerbrus向我们指出querySelectorAll返回nodelist的事实。我起初忽略了这一点。而不是数组。现在nodelist是阵型。因此，您仍然可以使用Array.prototype.forEach.call();

将其视为一个

由于nodelist没有函数forEach，我们需要从Array对象调用它。然后我们使用links的第一个参数传递对call的引用。

从Javascript中的元素列表中获取href列表

4 个答案: