Filtrar ou mapear listas de nós em ES6

Qual é a maneira mais eficiente de filtrar ou mapear uma lista de nós no ES6?

Com base em minhas leituras, eu usaria uma das seguintes opções:

[...nodelist].filter

ou

Array.from(nodelist).filter

Qual desses você recomendaria? E existem maneiras melhores, por exemplo, sem envolver matrizes?

• [...nodelist] fará um array de fora de um objeto se o objeto for iterável.
• Array.from(nodelist)fará uma matriz de um objeto se o objeto for iterável ou se o objeto for semelhante a uma matriz (tem .lengthe props numéricos)

Seus dois exemplos serão idênticos se NodeList.prototype[Symbol.iterator]existirem, porque ambos os casos cobrem iteráveis. Se o seu ambiente não foi configurado de forma NodeListiterável, o primeiro exemplo falhará e o segundo terá êxito. Babelatualmente não lida com este caso adequadamente .

Portanto, se o seu NodeListfor iterável, você realmente decide qual será o seu uso. Eu provavelmente escolheria caso a caso. Um benefício do Array.fromé que leva um segundo argumento de uma função de mapeamento, enquanto o primeiro [...iterable].map(item => item)teria que criar um array temporário, Array.from(iterable, item => item)não. Se você não estiver mapeando a lista, não importa.

TL; DR;

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

O método slice () retorna uma matriz. Essa matriz retornada é uma cópia superficial da coleção (NodeList). Portanto, funciona mais rápido do que Array.from (). Portanto, funciona tão rápido quanto Array.from ()

Elementos da coleção original são copiados para a matriz retornada da seguinte maneira:

• Para referências de objeto (e não o objeto real), a fatia copia as referências de objeto para a nova matriz. Tanto a matriz original quanto a nova se referem ao mesmo objeto. Se um objeto referenciado for alterado, as alterações serão visíveis para os arrays novos e originais.
• Para strings, números e booleanos (não String, Number e objetos Boolean), o slice copia os valores para o novo array. Mudanças na string, número ou booleano em um array não afetam o outro array.

Breve explicação sobre os argumentos

Array.prototype.slice (beginIndex, endIndex)

• usa argumentos opcionais beginIndex e endIndex. Se eles não forem fornecidos, as fatias usam beginIndex == 0, portanto, extrai todos os itens da coleção

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

• leva um objeto como o primeiro argumento. Se usarmos uma coleção como um objeto, significa literalmente que chamamos o método slice diretamente desse objeto namespace.slice ()

Encontrei uma referência que usa mapdiretamente na NodeList por

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

Não testei, mas parece plausível que seja mais rápido porque deve acessar o NodeList diretamente.

Que tal agora:

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

É a mesma abordagem mencionada nos documentos MDN para NodeList.forEach (em 'Polyfill'), funciona para IE11 , Edge, Chrome e FF.