Javascript .map() 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31676135/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript .map() is not a function
提问by JSn00b
I am new here (and new to JavaScript), so please excuse my super basic questions. I have a HTML page with different images that all share a class on it. By using getElementsByClassName, I get an array. I want to add an event listener to each of the cells in the array by using the .map() function.
我是新来的（也是 JavaScript 的新手），所以请原谅我的超级基本问题。我有一个 HTML 页面，其中包含所有共享一个类的不同图像。通过使用 getElementsByClassName，我得到了一个数组。我想使用 .map() 函数为数组中的每个单元格添加一个事件侦听器。
This is what I have:
这就是我所拥有的：
window.onload = function(){
var allImgs = document.getElementsByClassName("pft");
var newImgs = allImgs.map(
function(arrayCell){
return arrayCell.addEventListener("mouseover, functionName");
}
);
};
This keeps showing the error "allImgs.map is not a function" even when I change the inner function to something that doesn't include the event listener.
即使我将内部函数更改为不包含事件侦听器的内容，这也会不断显示错误“allImgs.map 不是函数”。
I have another version of this code where I just loop through the array cells within window.onload and add the event listener to each of them that way and it works. Why isn't the .map() function working? Can it not be used in window.onload?
我有这个代码的另一个版本，我只是在 window.onload 中循环遍历数组单元格，并以这种方式将事件侦听器添加到每个单元格中，并且它可以工作。为什么 .map() 函数不起作用？不能在window.onload中使用吗？
回答by flawyte
getElementsByClassName()returns an HTMLCollectionnot an Array. You have to convert it into a JavaScript array first :
getElementsByClassName()返回一个HTMLCollectionnot an Array。您必须先将其转换为 JavaScript 数组：
allImgs = Array.prototype.slice.call(allImgs);
// or
allImgs = [].slice.call(allImgs);
// or
allImgs = Array.from(allImgs);
回答by Quentin
By using getElementsByClassName, I get an array.
通过使用 getElementsByClassName，我得到了一个数组。
No, you don't.
不，你没有。
You get a live HTMLCollection. This is array-like but is not an array.
你会得到一个实时的HTMLCollection。这类似于数组，但不是数组。
Since it is sufficiently array-like, you can apply the mapmethod from a real array.
由于它非常类似于数组，因此您可以map从实际数组中应用该方法。
var text_content = [].map.call(
document.getElementsByClassName("sdf"),
function (currentValue, index, collection) {
return currentValue.innerHTML;
}
);
console.log(text_content); <p class="sdf">foo</p>
<p class="sdf"></p>
<p class="sdf">bar</p>
<p class="sdf"></p>
<p class="sdf"></p>
回答by Rustem Mustafin
Another option would be to use mapdirectly:
另一种选择是map直接使用：
[].map.call(allImages, function() { ... });
However, what you are doing is better achieved with Array.prototype.forEach.
但是，使用Array.prototype.forEach.
回答by Ari Singh
Compact syntax:
紧凑的语法：
[...document.getElementsByClassName("pft")].map(arrayCell => arrayCell.addEventListener("mouseover", "functionName"))
回答by parvez alam
var elms = document.querySelectorAll('.demo');
for(var i = 0; i < elms.length; i++) {
var elm = elms[i];
elm.onmouseleave = function() {
this.style.color = "#000";
}
elm.onmouseover = function() {
this.style.color = 'red';
}
}.demo {
cursor:pointer;
}<div>
<p class="demo">paragraph one</p>
<p class="demo">paragraph two</p>
<p class="demo">paragraph three</p>
<p class="demo">paragraph four</p>
<p class="demo">paragraph five</p>
<p class="demo">paragraph six</p>
</div>