在DOM元素数组上调用内置函数

Question

这是Ive第二次遇到这个&这次决定提出一个问题，而不是寻找替代解决方案。

场景： 我们从document.getElementsByClassName获取元素列表。返回的列表是一个数组。为什么我不能在这个返回的数组上使用像map, find, filter这样的内置数组函数？

https://jsfiddle.net/xbka5pt2/

<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 
<div class="classy"></div> 

的Javascript：

let list = document.getElementsByClassName("classy"); 
console.log(list); 
// the following returns a 'typeError': 
// "list.map is not a function" 
list.map(function(ele){ 
    console.log("ele is", ele); 
}); 

我得到的错误：TypeError: list.map is not a function当我尝试&使用地图功能列表阵列上。谢谢。

Answer 1

这是因为getElementsByClassname返回一个HtmlCollection。这里是一个工作的解决方案：

let list = document.getElementsByClassName("classy"); 
console.log(list); 

Array.prototype.map.call(list, function(ele) { 
    console.log("ele is", ele); 
}); 

通过调用从列表作为参数Array的原型可以映射每个函数。另一种可能性是与[]算这样称呼它：

[].map.call(list, function (el) {...});