javascript - `document.getElementsByClassName` 的结果没有定义像 `map` 这样的数组方法，即使它是一个数组

Question

我有以下代码来选择一些 div 并在其上添加点击处理程序

var tiles = document.getElementsByClassName("tile");

tiles.map(function(tile, i){
    tile.addEventListener("click", function(e){
        console.log("click!");
    });
});

这会引发错误，因为 map 未定义，即使 tiles 是一个数组。 如果我制作这样的数组，则 map 可以正常工作:

var a = [1, 2, 3, 4];
a.map(/*whatever*/);

解决方法是像这样将 map 附加到图 block :

tiles.map = Array.prototype.map;

这很好用。 我的问题是为什么 tiles 没有定义 map ？真的不是数组吗？

Answer 1

对，它不是真正的数组。这是一个“类数组”。

不要将 map 附加到 tiles。就这样

Array.prototype.map.call(tiles, function...)

有些人可能会建议

Array.prototype.slice.call(tiles).map(function...

归结为同一件事。有些人喜欢写

[].slice.call(tiles).map(function...

这节省了几次击键。

当然，因为您并没有真正使用 map 来返回数组，所以您可以用老式的方式循环:

for (var i = 0; i < tiles.length; i++) {
    tiles[i].addEventListener("click", function(e){
        console.log("click!");
    });
}

另见 explanation at MDN .虽然这里讨论的是 NodeList，但同样的原则也适用于 HTMLCollection，这是 getElementsByClassName 返回的内容。

在 ES6 中，我们有一些更简单的方法可以将 tiles 变成数组，包括

[...tiles]
Array.from(tiles)