Фильтровать или сопоставлять нодлисты в ES6

• [...nodelist] создаст массив из объекта, если объект является итерируемым.
• Array.from(nodelist) создаст массив из объекта, если объект является итерируемым или, если объект похож на массив (имеет .length и числовые свойства)

Ваши два примера будут идентичными, если NodeList.prototype[Symbol.iterator] существует, потому что оба случая охватывают итерации. Однако, если ваша среда не настроена таким образом, чтобы NodeList была итерируемой, ваш первый пример завершится ошибкой, а второй завершится успешно. Babel в настоящее время не обрабатывает этот случай должным образом.

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

TL;DR;

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

Метод slice() возвращает массив. Этот возвращенный массив является поверхностной копией коллекции (NodeList) Поэтому он работает быстрее, чем Array.from() То есть он работает так же быстро, как Array.from()

Элементы исходной коллекции копируются в возвращаемый массив следующим образом:

• Для ссылок на объекты (а не для фактического объекта) срез копирует ссылки на объекты в новый массив. И исходный, и новый массив относятся к одному и тому же объекту. Если объект, на который делается ссылка, изменяется, эти изменения видны как в новом, так и в исходном массивах.
• Для строк, чисел и логических значений (не объектов String, Number и Boolean) slice копирует значения в новый массив. Изменения строки, числа или логического значения в одном массиве не влияют на другой массив.

Краткое объяснение аргументов

Array.prototype.slice(beginIndex, endIndex)

• принимает необязательные аргументы beginIndex и endIndex. Если они не предоставлены, срезы используют beginIndex == 0, таким образом извлекая все элементы из коллекции.

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

• принимает объект в качестве первого аргумента. Если мы используем коллекцию как объект, это буквально означает, что мы вызываем метод slice непосредственно из этого объекта namespace.slice().

Я нашел ссылка, которая использует map непосредственно в NodeList по

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

Я не проверял это, но кажется вероятным, что это будет быстрее, потому что он должен напрямую обращаться к NodeList.

Как насчет этого:

// 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 (в разделе "Polyfill"), он работает для IE11, Edge, Chrome и FF.

Фильтровать или сопоставлять нодлисты в ES6

Я вышел из этой простой функции. @see https://developer.mozilla.org/fr/docs/Web/API/NodeList/entries#exemple

function filterNodeList(NodeList, callback) {
if (!typeof callback === "function") callback = (i) => i; // Any have better idear?

const Result = document.createElement("div");
//# No need to filter empty NodeList
if (Node.length === 0) return Node;

for (let i = 0; i < Node.length; i++) {
  if (callback(Node.item(i))) Result.appendChild(Node.item(i));
}

return Result.childNodes;}

Я хочу узнать больше :›