Métodos de array en JavaScript: Guía con ejemplos y ejercicios
Domina los métodos de array en JavaScript. Aprende a manipular y transformar arrays con ejemplos claros y ejercicios prácticos.
¿Qué son los métodos de array en JavaScript?
Los métodos de array en JavaScript son funciones integradas que permiten realizar diversas operaciones sobre arrays, como agregar, eliminar, transformar y recorrer elementos. Estos métodos facilitan la manipulación de datos almacenados en arrays de manera eficiente y concisa.
Métodos comunes de array en JavaScript
push()
El método push() agrega uno o más elementos al final de un array y devuelve la nueva longitud del array.
let frutas = ["manzana", "banana"];
frutas.push("naranja");
console.log(frutas); // ["manzana", "banana", "naranja"]
pop()
El método pop() elimina el último elemento de un array y lo devuelve. Este método modifica la longitud del array.
let frutas = ["manzana", "banana", "naranja"];
let ultimaFruta = frutas.pop();
console.log(ultimaFruta); // "naranja"
console.log(frutas); // ["manzana", "banana"]
shift()
El método shift() elimina el primer elemento de un array y lo devuelve. Este método modifica la longitud del array.
let frutas = ["manzana", "banana", "naranja"];
let primeraFruta = frutas.shift();
console.log(primeraFruta); // "manzana"
console.log(frutas); // ["banana", "naranja"]
unshift()
El método unshift() agrega uno o más elementos al inicio de un array y devuelve la nueva longitud del array.
let frutas = ["banana", "naranja"];
frutas.unshift("manzana");
console.log(frutas); // ["manzana", "banana", "naranja"]
map()
El método map() crea un nuevo array con los resultados de la llamada a una función proporcionada aplicada a cada elemento del array original.
let numeros = [1, 2, 3, 4];
let cuadrados = numeros.map((num) => num * num);
console.log(cuadrados); // [1, 4, 9, 16]
filter()
El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función proporcionada.
let numeros = [1, 2, 3, 4, 5, 6];
let pares = numeros.filter((num) => num % 2 === 0);
console.log(pares); // [2, 4, 6]
reduce()
El método reduce() aplica una función a un acumulador y a cada valor del array (de izquierda a derecha) para reducirlo a un único valor.
let numeros = [1, 2, 3, 4];
let suma = numeros.reduce((acumulador, num) => acumulador + num, 0);
console.log(suma); // 10
forEach()
El método forEach() ejecuta una función proporcionada una vez por cada elemento del array. No devuelve un nuevo array.
let frutas = ["manzana", "banana", "naranja"];
frutas.forEach((fruta) => console.log(fruta));
// Imprime:
// manzana
// banana
// naranja
find()
El método find() devuelve el primer elemento del array que cumple con la condición implementada por la función proporcionada. Si ningún elemento cumple la condición, devuelve undefined.
let numeros = [1, 2, 3, 4, 5];
let numeroMayorQueTres = numeros.find((num) => num > 3);
console.log(numeroMayorQueTres); // 4
includes()
El método includes() determina si un array incluye un determinado elemento, devolviendo true o false según corresponda.
let frutas = ["manzana", "banana", "naranja"];
let tieneBanana = frutas.includes("banana");
console.log(tieneBanana); // true
slice()
El método slice() devuelve una copia superficial de una porción del array dentro de un nuevo array, sin modificar el array original. Se pueden especificar los índices de inicio y fin.
let frutas = ["manzana", "banana", "naranja", "pera", "uva"];
let algunasFrutas = frutas.slice(1, 4);
console.log(algunasFrutas); // ["banana", "naranja", "pera"]
splice()
El método splice() cambia el contenido de un array eliminando, reemplazando o agregando elementos en una posición específica. Modifica el array original y devuelve un array con los elementos eliminados.
let frutas = ["manzana", "banana", "naranja", "pera"];
let eliminadas = frutas.splice(1, 2, "kiwi", "mango");
console.log(eliminadas); // ["banana", "naranja"]
console.log(frutas); // ["manzana", "kiwi", "mango", "pera"]
join()
El método join() une todos los elementos de un array en una cadena, separándolos por un separador especificado. Si no se especifica un separador, se utiliza una coma por defecto.
let frutas = ["manzana", "banana", "naranja"];
let cadena = frutas.join(" - ");
console.log(cadena); // "manzana - banana - naranja"
sort()
El método sort() ordena los elementos de un array in situ y devuelve el array ordenado. Por defecto, los elementos se convierten a cadenas y se ordenan en orden lexicográfico.
let numeros = [3, 1, 4, 1, 5, 9];
numeros.sort((a, b) => a - b);
console.log(numeros); // [1, 1, 3, 4, 5, 9]
Conclusión
Los métodos de array en JavaScript son herramientas poderosas que facilitan la manipulación y transformación de datos almacenados en arrays. Desde agregar y eliminar elementos hasta transformar y filtrar datos, estos métodos permiten escribir código más limpio y eficiente. Practicar su uso a través de ejemplos y ejercicios es fundamental para dominar su aplicación en el desarrollo web.
-
Objetos en JavaScript: Objetos en JavaScript: Guía para Principiantes con Ejemplos.
-
Datos JSON en JavaScript: JSON en JavaScript: Qué es y cómo usarlo con ejemplos prácticos
-
Más sobre métodos de array: es.javascript - Métodos de array.
💻 Prueba este ejercicio básico sobre métodos de array en JavaScript: