JavaScript nos proporciona una serie de métodos predefinidos para el manejo de arrays. Realmente existen muchos, pero no se trata de memorizarlos todos sino de entenderlos y aprender lo indispensable y, cuando necesites alguno muy concreto, te sonará el nombre y podrás googlearlo.
En este artículo vamos a explicar y ver ejemplos de algunos métodos, pero primero repasaremos qué es un método y qué es un Array...
Un método es un bloque de código que contiene una serie de instrucciones, estas instrucciones realizan una determinada tarea. Cuando se necesita hacer uso de este método simplemente se lo llama por su nombre y el flujo del programa "salta" al lugar donde está definido, ejecuta todas sus instrucciones y, al finalizar, retorna a la línea posterior a la llamada del método.
Un array es un tipo de variable que contiene una colección o agrupación de elementos, se representa con [] y los elementos estan separados por una coma ,. Puedes crear un array con elementos de diferentes tipos: cadena , boolean, número, objetos, e incluso con otros arrays.
Métodos:
sort()
Este método ordena un array alfabéticamente de forma ascendente, modificando el array original.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.sort(); // ['Carla', 'Pedro', 'Sebastian', 'Yanet']
Los arrays de JavaScript a menudo contienen objetos. Incluso si los objetos tienen propiedades de diferentes tipos de datos, el método sort() se puede usar para ordenar por alguna propiedad en particular:
const personas = [
{nombre:"Pedro", edad:43},
{nombre:"Sebastian", edad:21},
{nombre:"Yanet", edad:35}
];
personas.sort((a, b) => a.edad - b.edad);
/* 0: {nombre: 'Sebastian', edad: 21}
1: {nombre: 'Yanet', edad: 35}
2: {nombre: 'Pedro', edad: 43} */
⚠️ ADVERTENCIA!
El método sort() ordena los valores como cadenas. No se pueden ordenar números. Por ejemplo, si quiero ordenar los números 25 y 100, "25" es mayor que "100", porque "2" es mayor que "1".
Se puede solucionar esto proporcionando una función de comparación:
const numeros = [40, 100, 1, 5, 25, 10];
numeros.sort((a,b) => a - b); // [1, 5, 10, 25, 40, 100]
Puede usar el mismo truco para ordenar un array de números de forma descendente:
const numeros = [40, 100, 1, 5, 25, 10];
numeros.sort((a,b) => b - a); // [100, 40, 25, 10, 5, 1]
Cuando el método sort() compara dos valores, envía los valores a la función de comparación y los ordena según el valor devuelto (negativo, cero, positivo).
Si el resultado es negativo a se ordena antes que b.
Si el resultado es positivo b se ordena antes que a.
Si el resultado es 0, no se realizan cambios en el orden.
reverse()
Este método invierte los elementos en un array, modificando el array original.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.reverse(); // ['Carla', 'Yanet', 'Sebastian', 'Pedro']
☑️ DATO!
El método reverse() se puede utilizar luego del método sort() para ordenar de forma descendente.
push()
Este método añade un elemento al final del array, modificando el array original y devuelve la nueva longitud.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.push("Rodrigo"); // 5
console.log(nombres); // ['Pedro', 'Sebastian', 'Yanet', 'Carla', 'Rodrigo']
join()
Este método se comporta como toString() devolviendo una cadena, pero además puedes especificar el separador.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.join(" * "); // 'Pedro * Sebastian * Yanet * Carla'
pop()
Este método elimina el último elemento de un array, modificando el original. Devuelve el valor que se eliminó.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.pop(); // 'Carla'
console.log(nombres); // ['Pedro', 'Sebastian', 'Yanet']
shift()
Este método elimina el primer elemento del array y no deja el índice vacío sino que se "corren" los elementos a un índice más bajo. Devuelve el valor que fue eliminado.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.shift(); // 'Pedro'
console.log(nombres); // ['Sebastian', 'Yanet', 'Carla']
unshift()
Este método agrega un nuevo elemento al array (al principio) y "desplaza" los elementos más antiguos. Devuelve la nueva longitud.
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.unshift("Rodrigo"); // 5
console.log(frutas); // ['Rodrigo', 'Pedro', 'Sebastian', 'Yanet', 'Carla']
concat()
Este método se usa para unir dos o más arrays. No cambia el array existente y devuelve uno nuevo.
const array1 = ["Yanet", "Carla"];
const array2 = ["Pedro", "Sebastian", "Rodrigo"];
array1.concat(array2); // ['Yanet', 'Carla', 'Pedro', 'Sebastian', 'Rodrigo']
Puede tomar cualquier cantidad de argumentos:
const array1 = ["Yanet", "Carla"];
const array2 = ["Pedro", "Sebastian", "Rodrigo"];
const array3 = ["Roberto", "Yamila"];
array1.concat(array2, array3); // ['Yanet', 'Carla', 'Pedro', 'Sebastian', 'Rodrigo', 'Roberto', 'Yamila']
forEach()
Este método llama a una función específica, una vez por cada elemento sobre el que itera dentro del array. No cambia el array original.
☑️ DATO!
No puedes controlar el bucle, por ejemplo, con las instrucciones break o continue. En el caso de que necesites usar break, puedes utilizar el método every().
Tenga en cuenta que la función toma 3 argumentos.
- El valor del elemento.
- El índice del elemento. (Opcional)
- El array en sí. (Opcional)
let texto = "";
const numeros = [45, 4, 9, 16, 25];
numeros.forEach((valor) => texto += valor + " ");
console.log(texto); // 45 4 9 16 25
En este ejemplo vamos a hacer uso de los 3 parámetros:
nombres = ["Pedro", "Sebastian", "Yanet", "Carla", "Rodrigo"];
function pasarLista(nombre, indice, array) {
let haySiguienteEstudiante = indice + 1 < array.length ? "Si" : "No"
console.log(`Está el número de estudiante ${indice + 1}: ${nombre} presente? Sí!. Hay un próximo estudiante? ${haySiguienteEstudiante}!`);
}
nombres.forEach(pasarLista)
/*
"Está el número de estudiante 1: Pedro presente? Sí!. Hay un próximo estudiante? Si!"
"Está el número de estudiante 2: Sebastian presente? Sí!. Hay un próximo estudiante? Si!"
"Está el número de estudiante 3: Yanet presente? Sí!. Hay un próximo estudiante? Si!"
"Está el número de estudiante 4: Carla presente? Sí!. Hay un próximo estudiante? Si!"
"Está el número de estudiante 5: Rodrigo presente? Sí!. Hay un próximo estudiante? No!"
*/
map()
Este método realiza una función en cada elemento del array. Crea un nuevo array y no cambia el original.
(No se ejecuta en array sin valores)
En este ejemplo se multiplica cada valor del array por 2:
const numeros= [45, 4, 9, 16, 25];
numeros.map((valor) => valor * 2); // [90, 8, 18, 32, 50]
filter()
Este método crea un nuevo array con los elementos que cumplen una condición.
const numeros= [45, 4, 9, 16, 25];
numeros.filter((valor) => valor > 18); // [45, 25]
every()
Este método devuelve true si todos los elementos del array cumplen con la condición.
Tenga en cuenta que puede tomar 3 argumentos:
- El valor del elemento.
- El índice del elemento. (Opcional)
- El array en sí. (Opcional)
const numeros = [45, 4, 9, 16, 25];
numeros.every((valor) => valor > 18); // false
some()
El método devuelve true si algún valor del array cumple con la condición.
Tenga en cuenta que puede tomar 3 argumentos:
- El valor del elemento.
- El índice del elemento. (Opcional)
- El array en sí. (Opcional)
const numeros = [45, 4, 9, 16, 25];
numeros.some((valor) => valor > 18); // true
indexOf()
Este método busca en el array el valor de un elemento, usando igualdad estricta === y devuelve su posición. Si el elemento está presente más de una vez, devuelve la posición de la primera aparición.
Devuelve -1 si no se encuentra el elemento.
Puede recibir 2 parámetros:
- El elemento a buscar. (Obligatorio)
- Índice donde comenzar la búsqueda. (Opcional)
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.indexOf("Yanet"); // 2
nombres.indexOf("Pedro", 2) // -1
lastIndexOf()
Este método funciona igual que indexOf(), pero busca de derecha a izquierda, de esta forma devuelve la posición de la última aparición del elemento especificado.
Al igual que el método anterior, puede recibir 2 parámetros:
- El elemento a buscar. (Obligatorio)
- Índice donde comenzar la búsqueda. Tener en cuenta que va a comenzar desde ese índice hacia la izquierda (Opcional).
const nombres = ["Pedro", "Sebastian", "Yanet", "Sebastian", "Carla"];
nombres.lastIndexOf("Sebastian"); // 3
nombres.lastIndexOf("Sebastian", 1); // 1
nombres.lastIndexOf("Sebastian", 0); // -1
find()
Este método devuelve el valor del primer elemento del array que cumple con una condición. (No es compatible con Internet Explorer).
Tenga en cuenta que la función puede tomar 3 argumentos:
- El valor del elemento.
- El índice del elemento. (Opcional)
- El array en sí. (Opcional)
const numeros = [4, 9, 16, 25, 29];
numeros.find((valor) => valor > 18); // 25
findIndex()
Este método devuelve el índice del primer elemento del array que cumple con una condición. (No es compatible con Internet Explorer).
Tenga en cuenta que la función toma 3 argumentos:
- El valor del elemento.
- El índice del elemento. (Opcional)
- El array en sí. (Opcional)
const numeros = [4, 9, 16, 25, 29];
numeros.findIndex((valor) => valor > 18); // 3
from()
Este método crea una nueva instancia de Array de cualquier objeto con una propiedad de longitud o de cualquier objeto iterable, como por ejemplo, String, Set, Map, etc. Es una propiedad estática del objeto Array y solo puede usarse como Array.from(). (No es compatible con Internet Explorer).
Tenga en cuenta que la función puede tomar 3 argumentos:
- El objeto iterable para convertilo en array (Obligatorio)
- Una función para llamar en cada elemento del array. (Opcional)
- Un argumento si la función anterior lo requiere. (Opcional)
Por ejemplo, crear un array a partir de una cadena:
Array.from("ABCDEFG"); // 'A', 'B', 'C', 'D', 'E', 'F', 'G']
Utilizando todos los argumentos:
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
ACLARACIÓN: Array.from(obj, func, arg) es igual que Array.from(obj).map(func, arg), excepto en que éste no crea un arreglo intermedio.
includes()
Este método nos permite verificar si un elemento está presente en el array, a diferencia de indexOf(), incluye NaN. (No es compatible con Internet Explorer y Edge 12/13).
const nombres = ["Pedro", "Sebastian", "Yanet", "Carla"];
nombres.includes("Sebastian"); // true
Conclusión
En este artículo, enumero algunos de los métodos más usados y los que, personalmente, me han llamado la atención para tenerlos a mano. Conocerlos nos ayudará a trabajar de manera más eficiente...
Espero que hayas aprendido algo nuevo!!