Vanilla JS-ES6:.map()不是一个函数

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而不是Array。您可以使用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()Id返回的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定义。

参考文献：

• document.querySelectorAll()
• Element.classListAPI
• NodeList.prototype.forEach()