Arrays en JavaScript: Ejercicios resueltos

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 que max. Si lo es, se actualiza max. 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 el elementoBuscado, 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 aplicamos reverse() 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

Comparte este artículo
Alejandro Nes
Alejandro Nes

¡Hola! Soy Alejandro Nes, desarrollador web con formación en informática y apasionado por la creación de contenido educativo. Aprendamos juntos a programar :)

Artículos: 6