Question

我正在尝试使用.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";
}

请为我指明正确的方向。

Answer 1

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";
}

Answer 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";
}

Answer 3

考虑到您要遍历元素，而不是（从已发布的代码中）对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定义。

参考文献：

香草JS-ES6：.map（）不是函数

3 个答案: