Header Ads Widget

Ticker

6/recent/ticker-posts

JavaScript Array.from () (NodeList y argumentos)

 El Array.from()método JavaScript le permite convertir objetos tipo Array (por ejemplo, NodeListarguments) en una instancia de Array.

Puede utilizar el Array.from()método para evitar los antiguos trucos utilizados por los desarrolladores de JavaScript para realizar tareas típicas como:

  • Obtenga los argumentos de una función convirtiendo el argumentsobjeto en una instancia de Array,
  • Iterando sobre una NodeList devuelta por métodos como querySelectorAll(), etc.

Conversión de función argumentsen ArrayusoArray.slice()

Por ejemplo, antes de que pueda procesar las variables pasadas a una función, necesitamos convertir el argumentsobjeto, que está disponible automáticamente dentro de la función y le permite pasar un número variable de parámetros a la función, debe convertirlo en un objeto Array. Tradicionalmente, los desarrolladores de JavaScript hacen algo como el siguiente código:

function aFunction() {
    const args = [].prototype.slice.call(arguments);

    args.forEach((arg) => {
        console.log(arg);
    });
}

Llamamos al slice()método Array en el argumentsobjeto que devuelve una Arrayinstancia que contiene el mismo número de argumentos si no le pasamos ningún otro parámetro slice().

Después de obtener la argsinstancia de Array, ahora podemos usar métodos de Array como el forEach()método para iterar sobre la matriz y procesar los argumentos de la función.

Pero, ¿qué pasa con esta solución? Simplemente, ¡se considera hacky! Dado que el slice()método se aplica a matrices y el argumentsobjeto es iterable pero no es una instancia de Array.

Convertir NodeLista en ArrayusoArray.slice()

Otra técnica antigua, a menudo utilizada por los desarrolladores de JavaScript, es utilizar el Array.slice()método para convertir un NodeListobjeto en una Arrayinstancia. Muchas API DOM devuelven un NodeListobjeto, como el famoso querySelectorAll(), por lo que necesitamos convertirlo en un Arrayobjeto para poder aplicar Arraymétodos, como forEach()map(), en él. Veamos esto con un ejemplo:

const nodeList = document.querySelectorAll("div");
const array = [].slice.call(nodeList);

Esta es una captura de pantalla del ejemplo en la consola DevTools de Chrome:

Ejemplo de NodeList & Array.slice ()

Puede ver que la variable nodeList es una instancia de NodeListy que la matriz de variables es una instancia de Array.

Utilizando Array.from()

Evitemos ahora el uso de técnicas antiguas aprovechando el Array.from()método más nuevo, disponible en los navegadores modernos, que ahora es la forma correcta de convertir objetos iterables, como argumentsNodeList, en Arrayobjetos.

Conversión argumentsArrayusoArray.from()

Empezaremos por el ejemplo de los argumentos de la función. El código anterior se puede transformar en el siguiente código:

function aFunction() {
    const args = Array.from(arguments);

    args.forEach((arg) => {
        console.log(arg);
    });
}

A continuación, llamamos a la función con algunos argumentos y vemos que los resultados se imprimen en la consola:

aFunction("arg0","arg1","arg2","arg3")

Esta es la salida en la consola de Chrome:

ejemplo de argumentos y Array.from ()

Convertirse NodeListen ArrayusarArray.from()

A continuación, veamos cómo usar el Array.from()método para convertir un NodeListobjeto en Arrayobjeto. El código anterior se convierte en:

const nodeList = document.querySelectorAll("div");
const array = Array.from(nodeList);

Este es el resultado en la consola:

NodeList con Array.from ()

El ejemplo muestra que nodeList es una instancia de NodeListwhile array es una instancia de Array.

Asignación de valores mediante funciones de flecha

El Array.from()método le permite mejorar el proceso de conversión utilizando el segundo argumento que toma una función de flecha. La función de flecha se aplica a los elementos del objeto iterable.

Digamos que queremos obtener una matriz de classNames en lugar de todo el objeto DOM

const nodeList = document.querySelectorAll("div");
const classNames = Array.from(nodeList, node => node.className);

Este es el ejemplo que se ejecuta en la consola de DevTools:

Array. De Arrow Map

Publicar un comentario

0 Comentarios