Filtruj lub mapuj listy węzłów w ES6

Question 1

Jaki jest najbardziej skuteczny sposób filtrowania lub mapowania listy węzłów w ES6?

W oparciu o moje odczyty użyłbym jednej z następujących opcji:

[...nodelist].filter

lub

Array.from(nodelist).filter

Który byś polecił? Czy są lepsze sposoby, na przykład bez użycia tablic?

Question 2

[...nodelist] utworzy tablicę z obiektu, jeśli obiekt jest iterowalny.
Array.from(nodelist)utworzy tablicę z obiektu, jeśli obiekt jest iterowalny lub jeśli obiekt jest podobny do tablicy (ma .lengthi numeryczne właściwości)

Twoje dwa przykłady będą identyczne, jeśli NodeList.prototype[Symbol.iterator]istnieją, ponieważ oba przypadki obejmują iterowalne. Jeśli jednak środowisko nie zostało skonfigurowane w sposób umożliwiający NodeListiterację, pierwszy przykład zakończy się niepowodzeniem, a drugi powiedzie się. Babelobecnie nie obsługuje prawidłowo tej sprawy .

Więc jeśli twój NodeListjest iterowalny, to naprawdę zależy od ciebie, którego użyjesz. Prawdopodobnie wybrałbym indywidualnie dla każdego przypadku. Jedną z korzyści Array.fromjest to, że pobiera drugi argument funkcji odwzorowującej, podczas gdy pierwszy [...iterable].map(item => item)musiałby utworzyć tymczasową tablicę, Array.from(iterable, item => item)co nie. Jeśli jednak nie mapujesz listy, nie ma to znaczenia.

Question 3

TL; DR;

Array.prototype.slice.call(nodelist).filter

Metoda slice () zwraca tablicę. Ta zwrócona tablica jest płytką kopią kolekcji (NodeList), więc działa szybciej niż Array.from () Więc działa tak szybko jak Array.from ()

Elementy oryginalnej kolekcji są kopiowane do zwracanej tablicy w następujący sposób:

W przypadku odniesień do obiektów (a nie rzeczywistego obiektu) wycinek kopiuje odniesienia do obiektów do nowej tablicy. Zarówno oryginalna, jak i nowa tablica odnoszą się do tego samego obiektu. Jeśli obiekt, do którego istnieje odniesienie, ulegnie zmianie, zmiany będą widoczne zarówno dla nowej, jak i oryginalnej tablicy.
W przypadku łańcuchów, liczb i wartości logicznych (nie obiektów typu String, Number i Boolean) wycinek kopiuje wartości do nowej tablicy. Zmiany ciągu, liczby lub wartości logicznej w jednej tablicy nie wpływają na drugą tablicę.

Krótkie wyjaśnienie dotyczące argumentów

Array.prototype.slice (beginIndex, endIndex)

przyjmuje opcjonalne argumenty beginIndex i endIndex. Jeśli ich nie podano, plasterki używa beginIndex == 0, więc wyodrębnia wszystkie elementy z kolekcji

Array.prototype.slice.call (namespace, beginIndex, endIndex)

przyjmuje obiekt jako pierwszy argument. Jeśli używamy kolekcji jako obiektu, dosłownie oznacza to, że wywołujemy metodę slice bezpośrednio z tego obiektu namespace.slice ()

Question 4

Znalazłem odniesienie, które używa mapbezpośrednio w NodeList przez

Array.prototype.map.call(nodelist, fn)

Nie testowałem tego, ale wydaje się prawdopodobne, że będzie to szybsze, ponieważ powinno uzyskać bezpośredni dostęp do NodeList.

Question 5

Co powiesz na to:

// Be evil. Extend the prototype.
if (window.NodeList && !NodeList.prototype.filter) {
  NodeList.prototype.filter = Array.prototype.filter;
}

// Use it like you'd expect:
const noClasses = document
  .querySelectorAll('div')
  .filter(div => div.classList.length === 0)

Jest to takie samo podejście, jak wspomniano w dokumentacji MDN dla NodeList.forEach (w sekcji „Polyfill”), działa dla IE11 , Edge, Chrome i FF.