The querySelectorAll Metoda zwraca NodeList, która jest podobna do tablicy, ale nie jest do końca tablicą. Dlatego nie posiada metody forEach (które obiekty tablicy dziedziczą poprzez Array.prototype).

Ponieważ NodeList jest podobna do tablicy, metody tablicy będą na niej działać, więc używając [].forEach.call wywołujesz metodę Array.prototype.forEach w kontekście NodeList, tak jakbyś był w stanie po prostu zrobić yourNodeList.forEach(/*...*/).

Zauważ, że pusta tablica jest tylko skrótem do rozwiniętego wersja, którą prawdopodobnie zobaczysz też dość często:

Array.prototype.forEach.call(/*...*/);

Inne odpowiedzi bardzo dobrze wyjaśniły ten kod, więc dodam tylko sugestię.

Jest to dobry przykład kodu, który powinien być refakturowany dla uproszczenia i przejrzystości. Zamiast używać [].forEach.call() lub Array.prototype.forEach.call() za każdym razem, gdy to robisz, zrób z tego prostą funkcję:

function forEach( list, callback ) {
    Array.prototype.forEach.call( list, callback );
}

Teraz możesz wywołać tę funkcję zamiast bardziej skomplikowanego i niejasnego kodu:

forEach( document.querySelectorAll('a'), function( el ) {
   // whatever with the current node
});

Można lepiej napisać używając

Array.prototype.forEach.call( document.querySelectorAll('a'), function(el) {

});

To, co robi, to document.querySelectorAll('a') zwraca obiekt podobny do tablicy, ale nie dziedziczy z typu Array. Wywołujemy więc metodę forEach z obiektu Array.prototype z kontekstem jako wartością zwracaną przez document.querySelectorAll('a')

Pusta tablica ma właściwość forEach w swoim prototypie, która jest obiektem funkcji. (Pusta tablica jest po prostu łatwym sposobem uzyskania odniesienia do funkcji forEach, którą posiadają wszystkie obiekty Array.) Obiekty funkcyjne z kolei mają właściwość call, która jest również funkcją. Gdy wywołujesz funkcję call, uruchamia ona funkcję z podanymi argumentami. Pierwszy argument staje się this w wywołanej funkcji.

Możesz znaleźć dokumentację dla funkcji call tutaj . Dokumentacja dla forEach jest tutaj .

Wystarczy dodać jedną linijkę:

NodeList.prototype.forEach = HTMLCollection.prototype.forEach = Array.prototype.forEach;

document.querySelectorAll('a').forEach(function(el) {
  // whatever with the current node
});

Enjoy: -)

Uwaga: NodeList jest klasą globalną. Nie używaj tego polecenia, jeśli piszesz Bibliotekę Publiczną. Jest to jednak bardzo wygodny sposób na zwiększenie własnej skuteczności podczas pracy na stronie internetowej lub węźle.aplikacja js.

Tylko szybkie i brudne rozwiązanie, które zawsze używam. Nie tknąłbym prototypów, tak samo jak dobry trening. Oczywiście, istnieje wiele sposobów, aby to poprawić, ale masz pomysł.

const forEach = (array, callback) => {
  if (!array || !array.length || !callback) return
  for (var i = 0; i < array.length; i++) {
    callback(array[i], i);
  }
}

forEach(document.querySelectorAll('.a-class'), (item, index) => {
  console.log(`Item: ${item}, index: ${index}`);
});

[] zawsze zwraca nową tablicę, jest ona równoważna new Array(), ale jest gwarantowana, że zwróci tablicę, ponieważ Array może zostać nadpisana przez użytkownika, podczas gdy [] nie może. Jest to więc bezpieczny sposób na uzyskanie prototypu Array, a następnie, zgodnie z opisem, {[5] } jest używany do wykonania funkcji na arraylike nodelist (this).

Wywołuje funkcję o podanej tej wartości i podanych argumentach indywidualnie mdn

Norguard wyjaśnił co [].forEach.call() does and James Allardice Dlaczego robimy to: ponieważ querySelectorAll zwraca NodeList, która nie ma metody forEach...

Chyba że masz nowoczesną przeglądarkę jak Chrome 51+, Firefox 50+, Opera 38, Safari 10.

Jeśli nie możesz dodać Polifill:

if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = function (callback, thisArg) {
        thisArg = thisArg || window;
        for (var i = 0; i < this.length; i++) {
            callback.call(thisArg, this[i], i, this);
        }
    };
}