Javascript для...of не работает в Safari

Question

В настоящее время я пытаюсь создать простую навигацию, которая появляется / исчезает при нажатии одной из кнопок "toggleSidenav" (их несколько).

Казалось, что он отлично работает при тестировании с Firefox и Chrome, но сегодня, когда я попытался открыть свою страницу с помощью Safari (для настольной и мобильной версии), кнопки ничего не сделали.

Кажется, проблема в том, что я использовал цикл for, но проверка ссылки на for... of, Safari должна его поддерживать.

Мой код:

for (var btn of document.getElementsByClassName("toggleSidenav")) {
    btn.addEventListener("click", function() {
        var style = window.getComputedStyle(document.getElementById("sidenav"));

        if (style.getPropertyValue("display") == "none") {
            openSidenav();
        } else {
            closeSidenav();
        }
    });
}

В любом случае, мне, вероятно, нужно использовать альтернативный метод, потому что for... of поддерживается только в IE/Edge 12+, но мне все равно хотелось бы знать, почему это не сработало.

Answer 1

Safari поддерживает for-of с массивами. getElementsByClassName возвращает NodeList, который похож на массив, но не является истинным массивом, поэтому вам нужно преобразовать его в массив. Так как вам требуется поддержка ECMAScript 6 для for-of, ты можешь использовать Array.from() для этого преобразования, а не некоторые старые идиомы, такие как Array.prototype.slice.call(),

for (var btn of Array.from(document.getElementsByClassName("toggleSidenav"))) {
  btn.addEventListener("click", function() {
    var style = window.getComputedStyle(document.getElementById("sidenav"));

    if (style.getPropertyValue("display") == "none") {
      openSidenav();
    } else {
      closeSidenav();
    }
  });
}

function openSidenav() {
  document.getElementById("sidenav").style.display = 'block';
}

function closeSidenav() {
  document.getElementById("sidenav").style.display = 'none';
}

<button class="toggleSidenav">
  Toggle 1
</button>
<button class="toggleSidenav">
  Toggle 2
</button>
<button class="toggleSidenav">
  Toggle 3
</button>
<div id="sidenav">
  Side Nav
</div>