Arrays en JavaScript: 10 ejercicios resueltos + aprendizaje teorico
Domina el uso de arreglos en JavaScript con estos ejercicios resueltos y explicaciones prácticas, para mejorar tus habilidades de programación y comprender fundamentos del lenguaje.
Aprendizaje teórico
Los arreglos (arrays) en JavaScript son estructuras de datos que nos permiten almacenar y manipular listas de elementos, ya sean números, cadenas u otros objetos. Cada elemento ocupa una posición (índice) dentro del arreglo, comenzando desde 0. JavaScript proporciona numerosos métodos para realizar operaciones como agregar, eliminar, buscar y transformar los datos de un arreglo, lo que facilita el desarrollo de soluciones eficientes y organizadas.
Algunos métodos clave incluyen:
- push() y pop(): Agregan y eliminan elementos al final del arreglo, respectivamente.
- shift() y unshift(): Eliminan y agregan elementos al inicio del arreglo, respectivamente.
- map(): Crea un nuevo arreglo aplicando una función a cada elemento del arreglo original.
- filter(): Crea un nuevo arreglo que cumple con una condición definida en una función de prueba.
- reduce(): Aplica una función reductora a cada elemento para reducir el arreglo a un solo valor.
Estos métodos son esenciales para ahorrar tiempo y escribir código más limpio y fácil de mantener.
Antes de consultar la solución, intenta resolver cada ejercicio por tu cuenta. Lee atentamente la descripción del problema, analiza la lógica que podrías utilizar y escribe tu propio código. Resolverlos de manera autónoma reforzará tu comprensión y tu habilidad para pensar de forma algorítmica.
10 ejercicios resueltos de Arrays en JavaScript
1. Suma de todos los elementos de un arreglo
Descripción: Dado un arreglo de números, calcula la suma total de sus elementos.
Solución:
// Creamos un arreglo de ejemplo
const numeros = [4, 7, 2, 9, 10];
// Utilizamos reduce para obtener la suma de todos los elementos
const sumaTotal = numeros.reduce((acumulador, valorActual) => {
return acumulador + valorActual;
}, 0);
// Mostramos el resultado
console.log("La suma total es:", sumaTotal); // La suma total es: 32
Explicación:
reduce
recorre el arreglo, sumando cada valor al acumulador. El segundo parámetro del método (0
) es el valor inicial del acumulador.
2. Filtrar números pares de un arreglo
Descripción: Dado un arreglo de números, crea un nuevo arreglo que contenga únicamente los números pares.
Solución:
const numeros = [3, 8, 5, 12, 19, 20];
// Usamos filter para quedarnos con los números que cumplan la condición de ser pares
const pares = numeros.filter(num => num % 2 === 0);
console.log("Números pares:", pares); // Números pares: [ 8, 12, 20 ]
Explicación: El método
filter
evalúa cada número y solo conserva aquellos que son divisibles por 2 (es decir, pares).
3. Convertir todos los elementos a mayúsculas
Descripción: Dado un arreglo de cadenas, convierte cada una a mayúsculas y devuelve un nuevo arreglo.
Solución:
const frutas = ["manzana", "pera", "mango", "fresa"];
// Aplicamos el método map para transformar cada elemento a mayúsculas
const frutasMayusculas = frutas.map(fruta => fruta.toUpperCase());
console.log("Frutas en mayúsculas:", frutasMayusculas);
// Frutas en mayúsculas: [ 'MANZANA', 'PERA', 'MANGO', 'FRESA' ]
Explicación:
map
recorre cada elemento del arreglo y retorna un nuevo arreglo con las modificaciones aplicadas; en este caso, la conversión a mayúsculas.
4. Obtener el número máximo de un arreglo
Descripción: Dado un arreglo de números, determina cuál es el mayor de todos.
Solución:
const numeros = [10, 45, 2, 99, 78, 12];
// Con reduce comparamos el valor acumulado con el actual y conservamos el mayor
const numeroMaximo = numeros.reduce((max, valorActual) => {
return valorActual > max ? valorActual : max;
}, numeros[0]);
console.log("El número máximo es:", numeroMaximo); // El número máximo es: 99
Explicación: En cada iteración, verificamos si el
valorActual
es mayor quemax
. Si lo es, se actualizamax
. Iniciamos la comparación con el primer elemento del arreglo.
5. Eliminar duplicados de un arreglo
Descripción: Dado un arreglo que contiene valores duplicados, crea uno nuevo en el que cada valor aparezca una sola vez.
Solución:
const duplicados = [1, 3, 3, 7, 7, 7, 9, 1];
// Usamos un Set para eliminar duplicados y luego convertimos de nuevo a arreglo
const sinDuplicados = [...new Set(duplicados)];
console.log("Arreglo sin duplicados:", sinDuplicados);
// Arreglo sin duplicados: [ 1, 3, 7, 9 ]
Explicación: Un Set no permite valores repetidos. Luego, con el operador de propagación (
...
), reconstruimos un arreglo a partir de ese Set.
6. Contar cuántas veces aparece un elemento
Descripción: Dado un arreglo y un elemento específico, cuenta cuántas veces aparece ese elemento en el arreglo.
Solución:
const items = ["a", "b", "a", "c", "a", "b", "d"];
const elementoBuscado = "a";
// Con reduce contamos las ocurrencias
const ocurrencias = items.reduce((contador, valorActual) => {
return valorActual === elementoBuscado ? contador + 1 : contador;
}, 0);
console.log(`El elemento "${elementoBuscado}" aparece ${ocurrencias} veces.`);
// El elemento "a" aparece 3 veces.
Explicación: Cada vez que el
valorActual
coincide con elelementoBuscado
, incrementamos el contador en 1.
7. Ordenar un arreglo de números
Descripción: Dado un arreglo de números, ordénalo de menor a mayor.
Solución:
const numeros = [15, 3, 9, 20, 1, 5];
// Usamos sort con una función de comparación para ordenar numéricamente
numeros.sort((a, b) => a - b);
console.log("Arreglo ordenado:", numeros);
// Arreglo ordenado: [ 1, 3, 5, 9, 15, 20 ]
Explicación:
sort
recibe una función que determina el orden de los elementos. En el ejemplo,a - b
hace que se ordenen en orden ascendente.
8. Multiplicar todos los elementos por un valor constante
Descripción: Dado un arreglo de números, multiplica cada elemento por 2 y devuelve el resultado en un nuevo arreglo.
Solución:
const numeros = [1, 2, 3, 4, 5];
// Usamos map para multiplicar cada elemento por 2
const multiplicados = numeros.map(num => num * 2);
console.log("Elementos multiplicados:", multiplicados);
// Elementos multiplicados: [ 2, 4, 6, 8, 10 ]
Explicación: Con
map
, aplicamos la operación de multiplicar por 2 a cada elemento y obtenemos un nuevo arreglo sin modificar el original.
9. Combinar dos arreglos y filtrar elementos únicos
Descripción: Dado dos arreglos, combínalos en uno solo y, posteriormente, elimina cualquier elemento duplicado.
Solución:
const arreglo1 = [1, 2, 3];
const arreglo2 = [2, 3, 4, 5];
// Combinamos con el operador de propagación y luego usamos Set para eliminar duplicados
const combinado = [...arreglo1, ...arreglo2];
const unico = [...new Set(combinado)];
console.log("Arreglo combinado sin duplicados:", unico);
// Arreglo combinado sin duplicados: [ 1, 2, 3, 4, 5 ]
Explicación: Primero, unimos los dos arreglos con
...
. Después, pasamos el resultado a un Set para conservar solo valores únicos.
10. Invertir el orden de los elementos de un arreglo
Descripción: Dado un arreglo, retorna otro con los elementos en orden inverso.
Solución:
const numeros = [10, 20, 30, 40, 50];
// Con reverse() invertimos el orden de forma directa
const invertido = [...numeros].reverse();
console.log("Arreglo invertido:", invertido);
// Arreglo invertido: [ 50, 40, 30, 20, 10 ]
Explicación: Usamos el operador de propagación (
...
) para copiar el arreglo original y luego aplicamosreverse()
para invertir los elementos. Así, protegemos el arreglo original de cambios no deseados.
Preguntas frecuentes (FAQs)
¿Por qué es importante usar los métodos de arreglos en JavaScript?
Los métodos de arreglos simplifican las operaciones comunes (agregar, eliminar, buscar, transformar datos), haciéndolas más fáciles de escribir, leer y mantener. Además, ayudan a optimizar procesos, ya que muchos están altamente optimizados en el lenguaje.
¿Puedo usar un bucle for en lugar de métodos como map, filter o reduce?
Sí, puedes lograr resultados similares con bucles tradicionales; sin embargo, los métodos específicos de arreglos hacen el código más declarativo, limpio y menos propenso a errores.
¿Qué diferencia hay entre map y forEach?
map
retorna un nuevo arreglo con los resultados de aplicar una función a cada elemento, mientras que forEach
simplemente itera sobre los elementos sin crear un nuevo arreglo.
En este artículo has aprendido la teoría básica de los arreglos en JavaScript y has puesto en práctica diversos métodos para resolver problemas comunes. Dominar este tema te permitirá escribir código más claro y eficiente. ¡Cada ejercicio que resuelvas te acercará más a convertirte en un desarrollador seguro y competente!
¿Deseas seguir profundizando en JavaScript y otros temas de programación? Visita nuestro blog para descubrir más artículos, tutoriales y recursos que te ayudarán a continuar tu aprendizaje y convertirte en un experto. ¡Sigue adelante!
Sigue aprendiendo en MDN