Entendiendo el método Array.from() en JavaScript

El Array.from() El método en JavaScript crea una nueva instancia de copia superficial de Array de un objeto similar a una matriz o iterable. Puede usar este método para convertir objetos similares a matrices (objetos con un length propiedades y elementos indexados), así como objetos iterables (objetos como Map y Set) en una matriz.

Sintaxis

Esta es la sintaxis de Array.from() método:

Array.from(arrayLikeOrIterable[, mapFunction[, thisArg]])
  • arrayLikeOrIterable — Un objeto similar a una matriz o iterable que desea convertir en una matriz.
  • mapFunction(item, index) {...} — Una función de mapa opcional para llamar a cada elemento de la colección. Este método es extremadamente útil cuando desea convertir y transformar un objeto iterable o similar a una matriz en una matriz al mismo tiempo.
  • thisArg — El valor de thisArg se usa como this mientras invoca mapFunction .

El Array.from() método devuelve nuevo Array instancia. Cuando pasas mapFunction a Array.from() , ejecuta una función map() en cada elemento de la matriz recién creada.

En resumen, Array.from(obj, mapFunction, thisArg) tiene el mismo resultado que Array.from(obj).map(mapFunction, thisArg) , excepto que no crea una matriz intermedia.

Array de un String

El Array.from() se puede usar para convertir una cadena en una matriz en JavaScript. Cada alfabeto de la cadena se convierte en un elemento de la nueva instancia de matriz:

const str = 'Apple';

const arr = Array.from(str); // same as str.split('')

console.log(arr);

// ['A', 'p', 'p', 'l', 'e']

Array de un Set

Un Conjunto es un tipo especial de objeto introducido en ES6 que nos permite crear una colección de valores únicos. Para convertir un Set a una matriz de valores únicos, puede usar el Array.from() método:

const set = new Set(['🐦', '🦉', '🦆', '🦅']);

const birds = Array.from(set);

console.log(birds);

// ['🐦', '🦉', '🦆', '🦅']

También puede usar el código anterior para eliminar duplicados de una matriz:

function unique(arr) {
    return Array.from(new Set(arr));
};

unique([1, 2, 2, 3, 4, 4]);

// [1, 2, 3, 4]

Array de un Map

Un mapa es otra estructura de datos de ES6 que le permite crear una colección de pares clave-valor. Aquí hay un ejemplo que convierte una instancia de Map a una matriz usando Array.from() método:

const map = new Map([
    ['🍌', 'Banana'],
    ['🍕', 'Pizza'],
    ['🥒', 'Cucumber'],
    ['🌽', 'Maize'],
]);

const foods = Array.from(map);

console.log(foods);

// [['🍌', 'Banana'], ['🍕', 'Pizza'], ['🥒', 'Cucumber'], ['🌽', 'Maize']]

Array de un NodeList

Una NodeList es un objeto similar a una matriz que contiene una colección de elementos DOM o, más específicamente, nodos. Sin convertir un NodeList objeto a una matriz, no puede usar los métodos de matriz comunes como map() , slice() y filter() en él.

Para convertir un NodeList a una matriz, puede usar el Array.from() método:

const divs = document.querySelectorAll('div');

const divsArr = Array.from(divs);

// now you can use array methods
divsArr.map(div => console.log(div.innerText));

Eche un vistazo a este artículo para obtener más información sobre NodeList a la conversión de matrices.

Array de un arguments

El arguments object es un objeto similar a una matriz accesible dentro de todas las funciones que no son flechas que contiene los valores de los argumentos pasados ​​a esa función.

Para convertir el arguments objeto a una verdadera matriz, puede usar el Array.from() método:

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

    console.log(args);
}

numbers(1, 2, 3, 4, 5);

// [1, 2, 3, 4, 5]

Clonar una matriz

En un artículo anterior, analizamos varias formas de crear un clon de una matriz. Uno de ellos es Array.from() que crea una copia superficial de una matriz existente:

const fruits = ['🍑', '🍓', '🍉', '🍇'];

const moreFruits = Array.from(fruits);

console.log(moreFruits);

// ['🍑', '🍓', '🍉', '🍇']

Para crear un clon profundo de una matriz, consulte esta guía.

Inicializar una matriz

El Array.from() El método también es útil cuando desea inicializar una matriz con los mismos valores u objetos:

const length = 4;

// init array with 0
Array.from({ length }, () => 0);
// [0, 0, 0, 0]

// init array with random values
Array.from({ length }, () => Math.floor(Math.random() * 10) + 1);
// [2, 4, 2, 10]

// init array with objects
Array.from({ length }, () => ({}));

// [{}, {}, {}, {}]

Generando un rango de números

También puedes usar el Array.from() método para generar una secuencia de números en JavaScript:

const range = (stop) => {
    return Array.from({ length: stop }, (item, index) => index);
}

range(5); // [0, 1, 2, 3, 5]

Compatibilidad con navegadores

Desde Array.from() es parte de ES6, solo funciona en navegadores modernos. Para admitir navegadores más antiguos como IE, puede usar un polyfill disponible en MDN.

Para obtener más información sobre las matrices de JavaScript y cómo usarlas para almacenar múltiples piezas de información en una sola variable, consulte este artículo.

Leer a continuación: Comprender el método Object.assign() en JavaScript