En un tutorial vi lo siguiente:
Array.from( template.querySelectorAll('.hw-text') ) .forEach( n => n.textContent = hwMsg );Pero la siguiente línea también funcionaría.
template.querySelectorAll('.hw-text') .forEach( n => n.textContent = hwMsg );Ahora me pregunto por qué en el tutorial se usa Array.from y qué ventaja obtienes de él.
forEach no formaba parte de la especificación original de NodeList. La compatibilidad del navegador con querySelectorAll y Array.from es más amplia que con forEach en NodeLists.
Si ese soporte adicional de navegador vale la pena hoy en día es en parte una cuestión de opinión y en parte depende de la audiencia objetivo del sitio web.
Element.querySelectorAll() devuelve una lista de nodos. Este objeto tiene un método llamado forEach que le permite iterar sobre sus elementos.
ese mismo objeto NodeList tiene la propiedad de length , por lo que puede pasarlo a Array.from . from que devolverá una matriz, por lo que tiene acceso a todos los métodos de matriz y es por eso que lo usaron en el tutorial.
No estoy seguro de la intención del tutorial, pero no puede llamar a funciones de matriz en el objeto NodeList devuelto por querySelectorAll() .
document.querySelectorAll('.hw-text').map( ... ) // throws error [...document.querySelectorAll('.hw-text')].map( ... ) // works just fine Array.from(document.querySelectorAll('.hw-text')).map( ... ) // works just fine