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 dethisArg
se usa comothis
mientras invocamapFunction
.
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