Métodos de arrays
Guía completa de métodos de arrays en JavaScript: push, pop, map, filter, reduce y más con ejemplos prácticos
Las matrices son objetos tipo lista cuyo prototipo tiene métodos para realizar operaciones de
recorrido y mutación. Ni la longitud de una matriz de JavaScript ni los tipos de sus elementos son
fijos.
Declaración de arrays
Existen dos formas de declarar un array:
let arrayName = [item1, item2, item3];
let arrayName2 = new Array(item1, item2, item3);
Los elementos dela array están indexados, empezando por el cero.
Podemos obtener un elemento por su índice entre corchetes:
let arrayName = ["ansango", 1, false];
console.log(arrayName[0]); // Output: "ansango"
console.log(arrayName[1]); // Output: 1
console.log(arrayName[2]); // Output: false
Un array puede almacenar elementos de cualquier tipo:
let arrayName = [
"ansango", // string
1, // number
false, // boolean
{ name: "JavaScript" }, // Object
function () {}, //function
];
Los métodos de array más utilizados
⭐ pop() - Elimina el último elemento de un array y devuelve ese elemento. Este método cambia la longitud del array.
const plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];
console.log(plants.pop());
// Output: "tomato"
console.log(plants);
// Output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
⭐ push() - añade uno o más elementos al final de un array y devuelve la nueva longitud del mismo.
const animals = ["pigs", "goats", "sheep"];
const count = animals.push("cows");
console.log(count);
// Output: 4
console.log(animals);
// Output: Array ["pigs", "goats", "sheep", "cows"]
⭐ shift() - Elimina el primer elemento del array y devuelve el elemento eliminado. Este método cambia la longitud del array
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// expected output: Array [2, 3]
console.log(firstElement);
// expected output: 1
⭐ unshift() - Añade un elemento al principio del array y también devuelve la nueva longitud del array.
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// Output: 5
console.log(array1);
// Output: Array [4, 5, 1, 2, 3]
Los métodos
push()ypop()son rápidos, mientras queshift()yunshift()son lentos.
⭐ toString - Devuelve una lista de elementos separados por comas.
let arr = [1, 2, 3, 4, 5];
console.log(arr.toString());
// Output: 1,2,3,4,5
⭐ join() - Crea y devuelve una nueva cadena concatenando todos los elementos de un array, separados por comas o por una cadena especificada.
const elements = ["Fire", "Air", "Water"];
console.log(elements.join());
// Output: "Fire,Air,Water"
console.log(elements.join(""));
// Output: "FireAirWater"
console.log(elements.join("-"));
// Output: "Fire-Air-Water"
⭐ forEach() - Ejecuta una función proporcionada una vez por cada elemento del array.
const array1 = ["a", "b", "c"];
array1.forEach((element) => console.log(element));
// Output: "a"
// Output: "b"
// Output: "c"
⭐ filter() - Crea un nuevo array con todos los elementos que pasan la condición.
const words = [
"spray",
"limit",
"elite",
"exuberant",
"destruction",
"present",
];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Output: Array ["exuberant", "destruction", "present"]
⭐ map() - Crea un nuevo array relleno con los resultados de llamar a una función proporcionada en cada elemento de la matriz de llamada.
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
console.log(map1);
// Output: Array [2, 8, 18, 32]
⭐ find() - Devuelve el valor del primer elemento del array proporcionado que cumple con la condición proporcionada. Si ningún valor satisface la función de comprobación, se devuelve undefined.
const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);
// Output: 12
⭐ includes() - Determina si un array incluye un determinado valor entre sus entradas, devolviendo true o false según corresponda.
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Output: true
const pets = ["cat", "dog", "bat"];
console.log(pets.includes("cat"));
// Output: true
console.log(pets.includes("at"));
// Output: false
⭐ reduce() - Ejecuta una función reductora (que tú proporcionas) en cada elemento del array, dando como resultado un único valor de salida.
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// Output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// Output: 15
Si quieres saber más sobre reduce, puedes revisar este artículo
⭐ flat() - Crea un nuevo array con todos los elementos del array concatenados en él recursivamente hasta la profundidad especificada.
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// Output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2));
// Output: [0, 1, 2, [3, 4]]
La propiedad Length
La propiedad length establece o devuelve el número de elementos de un array.
let countries = [“Azerbaijan”, “Turkey”, “Russia”, “Germany”];
console.log(countries.length);
// Output: 4
countries.length = 5;
console.log(countries.length);
// Output: 5
Estos son todos los métodos y algo de información básica sobre arrays. Todas estas herramientas nos facilitan mucho la vida a la hora, sobre todo, de manejar datos y obtener información.