香草JS-ES6:.map()不是函数

时间:2018-11-10 08:26:31

标签: javascript dom ecmascript-6

我正在尝试使用.map()和ES6重构我的 for循环,但收到一条错误消息,指出“ .map不是函数”

//basic tab function
function openContent(tabpages) {
  var page = document.getElementsByClassName("content");

  // for (i = 0; i < page.length; i++) {
  //   page[i].style.display = "none";
  // }
  page.map(page => (page.style.display = "none"));

  document.getElementById(tabpages).style.display = "flex";
}

请为我指明正确的方向。

3 个答案:

答案 0 :(得分:3)

page是一个HTMLCollection,它是一个对象而不是数组。您可以使用Object.keys()

将对象的键提取到数组以进行映射

例如:

//basic tab function
function openContent(tabpages) {
  var page = document.getElementsByClassName("content");

  // for (i = 0; i < page.length; i++) {
  //   page[i].style.display = "none";
  // }
  Object.keys(page).map(idx => (page[idx].style.display = "none"));

  document.getElementById(tabpages).style.display = "flex";
}

答案 1 :(得分:2)

如前所述,getElementsByClassName不返回数组,因此无法在其上调用.map

转换为数组的最简单方法是使用Array.from

var page = Array.from(document.getElementsByClassName("content"));

但是,.map不是您正在做的正确工具。 .map根据回调的返回值创建一个新数组。但是您实际上并不打算使用该数组。

您只是想遍历所有元素。您可以使用for...of轻松完成此操作,而无需将节点列表转换为数组:

for (var page of document.getElementsByClassName("content")) {
  page.style.display = "none";
}

答案 2 :(得分:2)

考虑到您要遍历元素,而不是(从已发布的代码中)对Array.prototype.map()返回的Array做任何事情,因此建议使用document.querySelectorAll()NodeList.prototype.forEach()遍历该NodeList:

document.querySelectorAll('.content').forEach( (page) => page.style.display = 'none' );

尽管我也建议使用一个类来隐藏元素,而不是直接修改内联样式:

document.querySelectorAll('.content').forEach( (page) => page.classList.add('hidden') );

显然,这确实需要hidden类名的CSS定义。

参考文献: