Фільтруйте або відображайте ноделісти в ES6

Question 1

Який найефективніший спосіб фільтрувати або скласти карту вузлів у ES6?

Виходячи зі своїх показань, я скористався одним із таких варіантів:

[...nodelist].filter

або

Array.from(nodelist).filter

Який би ви порадили? І чи є кращі способи, наприклад, без залучення масивів?

Question 2

[...nodelist] зробить масив з об’єкта, якщо об’єкт ітерабельний.
Array.from(nodelist)зробить масив з об’єкта, якщо об’єкт є ітерабельним або якщо об’єкт схожий на масив (має .lengthі числовий пропс)

Ваші два приклади будуть ідентичними, якщо вони NodeList.prototype[Symbol.iterator]існують, оскільки обидва випадки стосуються ітерацій. Якщо ваше середовище не було налаштовано таким чином, щоб його NodeListможна було повторити, ваш перший приклад зазнає невдачі, а другий - вдалим. Babelв даний час не розглядає цю справу належним чином .

Отже, якщо ваш NodeListваріант є ітерабельним, ви насправді вирішуєте, яким саме ви користуєтесь. Я, швидше за все, вибирав би в кожному конкретному випадку. Однією з переваг Array.fromє те, що він приймає другий аргумент функції відображення, тоді як перший [...iterable].map(item => item)повинен був би створити тимчасовий масив, Array.from(iterable, item => item)ні. Якщо ви не складаєте карту списку, це не має значення.

Question 3

TL; DR;

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

Метод slice () повертає масив. Цей повернутий масив є неглибокою копією колекції (NodeList), тому він працює швидше, ніж Array.from (), тому працює так само швидко, як Array.from ()

Елементи вихідної колекції копіюються у повернутий масив наступним чином:

Для посилань на об'єкти (а не власне на об'єкт) фрагмент копіює посилання на об'єкти в новий масив. І оригінальний, і новий масив посилаються на один і той же об'єкт. Якщо об’єкт, на який посилається, змінюється, зміни видно як новому, так і оригінальному масивам.
Для рядків, чисел і булевих значень (не об’єктів String, Number та Boolean) фрагмент копіює значення в новий масив. Зміни рядка, числа або логічного значення в одному масиві не впливають на інший масив.

Коротке пояснення щодо аргументів

Array.prototype.slice (beginIndex, endIndex)

приймає необов’язкові аргументи beginIndex та endIndex. Якщо їх не передбачено, фрагменти використовує beginIndex == 0, таким чином він витягує всі елементи з колекції

Array.prototype.slice.call (простір імен, beginIndex, endIndex)

приймає об'єкт як перший аргумент. Якщо ми використовуємо колекцію як об'єкт, це буквально означає, що ми викликаємо метод slice безпосередньо з цього простору імен об'єкта.

Question 4

Я знайшов посилання, яке використовує mapбезпосередньо в NodeList користувачем

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

Я його не тестував, але здається правдоподібним, що це було б швидше, оскільки він повинен отримувати доступ до NodeList безпосередньо.

Question 5

Як щодо цього:

// 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)

Це той самий підхід, що згадується у документах MDN для NodeList.forEach (у розділі «Поліфіл»), він працює для IE11 , Edge, Chrome та FF.