Vanilla JS - ES6: .map () не является функцией

Question

Я пытаюсь провести рефакторинг моего для цикла с помощью .map () и ES6, и я получаю сообщение об ошибке, в котором говорится, что .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

Как уже упоминалось, 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 2

Учитывая, что вы перебираете элементы, а не & mdash; из кода, который вы опубликовали & mdash; делать что-либо с массивом, возвращенным из Array.prototype.map(). Id предлагает использовать 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.classList API .
• NodeList.prototype.forEach().

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