Javascript .map() 不是函数答案

【问题标题】：Javascript .map() is not a functionJavascript .map() 不是函数
【发布时间】：2015-10-18 23:58:16
【问题描述】：

我是新来的（并且是 JavaScript 新手），所以请原谅我的超级基本问题。我有一个带有不同图像的 HTML 页面，它们都共享一个类。通过使用 getElementsByClassName，我得到了一个数组。我想使用 .map() 函数为数组中的每个单元格添加一个事件监听器。

这就是我所拥有的：

window.onload = function(){
var allImgs = document.getElementsByClassName("pft");

var newImgs = allImgs.map(
        function(arrayCell){
            return arrayCell.addEventListener("mouseover, functionName");
        }
    );
};

即使我将内部函数更改为不包含事件侦听器的东西，这也会一直显示错误“allImgs.map 不是函数”。

我有这个代码的另一个版本，我只是循环遍历 window.onload 中的数组单元格，并以这种方式将事件侦听器添加到每个单元格，它就可以工作了。为什么 .map() 函数不起作用？不能在window.onload中使用吗？

【问题讨论】：

标签： javascript arrays

【解决方案1】：

getElementsByClassName() 返回 HTMLCollection 而不是 Array。您必须先将其转换为 JavaScript 数组：

allImgs = Array.prototype.slice.call(allImgs);

// or
allImgs = [].slice.call(allImgs);

// or (thanks @athari)
allImgs = Array.from(allImgs);

// or (thanks @eliaz-bobadilla)
allImgs = [...allImgs]

【讨论】：

stackoverflow.com/questions/222841/…
@Flawyte Eek，它还不适合我。我可能忽略了一些超级基本的东西。这是我得到的：window.onload = function(){ var allImgs = document.getElementsByClassName("pft"); var newImgs = [].slice.call(allImgs); console.log(newImgs.typeof); newImgs.map( function(arrayCell){ return arrayCell.addEventListener("mouseover, flipOver"); } ); };
@Flawyte 抱歉，上面评论中的控制台日志仅显示为“未定义”。好像没有变成数组？
@Flawyte Aaagh 我自己觉得很抱歉；我破坏了 addEventListener 括号内容（错误的引号）。谢谢！
@Flawyte 现代浏览器支持Array.from，它比Array.prototype.slice.call干净。

【解决方案2】：

通过使用 getElementsByClassName，我得到了一个数组。

不，你没有。

你会得到一个实时的HTMLCollection。这类似于数组，但不是数组。

由于它非常类似于数组，因此您可以从真实数组中应用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>

【讨论】：

哦，我明白了，谢谢你澄清这个问题。所以我永远不能在它上面使用 .map() 因为它不是一个真正的数组？但是我仍然可以像从数组中获取它一样访问它的单元格（如 htmlCols[i].addEventListener; 等）？

【解决方案3】：

另一种选择是直接使用map：

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

但是，使用Array.prototype.forEach 可以更好地实现您正在做的事情。

【讨论】：

【解决方案4】：

简洁的语法：

[...document.getElementsByClassName("pft")].map(arrayCell => arrayCell.addEventListener("mouseover", "functionName"))

【讨论】：

【解决方案5】：

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>

【讨论】：

querySelectorAll IE 不支持