Unidad 2: Arrays, Objetos y Clases
3.1 Arrays en JavaScript
Creación de un Array
Un array en JavaScript es una colección ordenada de elementos. Se puede crear de diferentes maneras:
Ejemplo de creación de un array
Uso de Índices
Los elementos de un array están numerados, comenzando desde el índice 0.
Acceder a elementos mediante índice
Cambiar un Valor mediante el índice
Podemos modificar los valores de un array asignando nuevos valores a sus índices:
Modificar elementos en un array
Borrado de Elementos (undefined)
Si eliminamos un elemento sin reorganizar el array, su posición quedará vacía con un valor undefined.
Eliminar un elemento y su problema
Este problema se soluciona utilizando métodos específicos para eliminar elementos, que veremos más adelante.
Propiedades de los Arrays
La propiedad más importante de un array es length, que nos indica cuántos elementos tiene el array.
Ejemplo de length
Recorrer un array con for
Podemos usar length para recorrer un array completamente con un bucle for.
Ejemplo de recorrido con for
| Recorrido con for | |
|---|---|
Recorrer un array con for...of
Una forma más moderna de recorrer un array es utilizando un bucle for...of, que nos permite acceder directamente a los valores sin necesidad de los índices.
La sintaxis es:
Sintaxis de for...of
Me permite iterar sobre arrays, strings, mapas, sets, etc. bbjetos iterables. Veamos un par de ejemplos:
Ejemplo recorrido array con for...of
Ejemplo recorrido de un string con for...of
Buscar un elemento con while y una variable bandera
Una variable bandera es una variable booleana (true o false) que utilizamos para indicar si una condición se ha cumplido dentro de un bucle. Se usa comúnmente cuando buscamos un valor en un array o cuando queremos detener un proceso una vez que se ha encontrado un resultado.
En este caso, utilizamos la variable encontrado como bandera para saber si hemos encontrado el elemento dentro del array.
Ejemplo de búsqueda con while
Métodos de los Arrays
JavaScript proporciona varios métodos para manipular arrays. A continuación, explicamos cada uno junto con sus parámetros y el valor que devuelven.
push() - Agregar al final
Agrega uno o más elementos al final del array y devuelve la nueva longitud del array.
Ejemplo de push()
pop() - Eliminar el último elemento
Elimina el último elemento del array y devuelve el elemento eliminado.
Ejemplo de pop()
shift() - Eliminar el primer elemento
Elimina el primer elemento del array y devuelve el elemento eliminado.
Ejemplo de shift()
unshift() - Agregar al inicio
Agrega uno o más elementos al inicio del array y devuelve la nueva longitud del array.
Ejemplo de unshift()
splice() - Agregar o eliminar elementos
Permite agregar, eliminar o reemplazar elementos en una posición específica.
Parámetros:
- Índice de inicio: Posición donde se comenzará la modificación.
- Número de elementos a eliminar: Define cuántos elementos se eliminan desde el índice indicado.
- Elementos a agregar (opcional): Elementos que se agregarán en la posición indicada.
Ejemplo de splice()
isArray() - Verificar si es un array
Devuelve true si el valor es un array, de lo contrario false.
Ejemplo de isArray()
sort() - Ordenar un array
Ordena los elementos del array alfabéticamente.
Ejemplo de sort()
reverse() - Invertir el orden de los elementos
Invierte el orden de los elementos en un array.
Ejemplo de reverse()
join() - Convertir un array en una cadena
Une los elementos del array en una cadena de texto con un separador especificado.
Ejemplo de join()
| Ejemplo de join() | |
|---|---|
concat() - Unir arrays
Concatena uno o más arrays y devuelve un nuevo array.
Ejemplo de concat()
indexOf() - Encontrar la posición de un elemento
Devuelve el primer índice donde se encuentra el elemento en el array, o -1 si no existe.
Esta función tiene dos parámetros opcionales:
fromIndex: Índice donde comenzar la búsqueda.searchElement: Elemento a buscar.
Veamos un ejemplo de búsqueda de un elemento en un array.
Ejemplo de indexOf()
Ahora un ejemplo de búsqueda a partir de un índice específico.
Ejemplo de indexOf() con fromIndex
lastIndexOf() - Encontrar la última aparición de un elemento
Devuelve el último índice donde se encuentra el elemento en el array.
Este método también tiene dos parámetros opcionales:
fromIndex: Índice donde comenzar la búsqueda.searchElement: Elemento a buscar.
Ejemplo de lastIndexOf()
Ahora veamos un ejemplo de búsqueda a partir de un índice específico.
Ejemplo de lastIndexOf() con fromIndex
Métodos Avanzados de Arrays
Estos métodos permiten realizar operaciones más avanzadas sobre los arrays. En estos métodos necesitamos definir una función que se aplicará a cada elemento del array, seguramente cuando veamos las funcionesy las funciones flecha en el tema siguiente te resultará más sencillo entender estos métodos.
some() - Verificar si algún elemento cumple una condición
Devuelve true si al menos un elemento cumple la condición dada. Sería como un OR lógico a todos los elementos, devolviendo true si al menos uno cumple la condición.
Ejemplo de some()
El mismo ejemplo utilizando una función flecha.
Ejemplo de some()
every() - Verificar si todos los elementos cumplen una condición
Devuelve true si todos los elementos cumplen la condición dada.
Ejemplo de every()
El mismo ejemplo utilizando una función flecha.
Ejemplo de every()
filter() - Filtrar elementos de un array
Devuelve un nuevo array con los elementos que cumplen una condición.
Ejemplo de filter()
El mismo ejemplo utilizando una función flecha.
Ejemplo de filter()
forEach() - Recorrer un array ejecutando una función
Ejecuta una función sobre cada elemento del array.
Ejemplo de forEach()
Con una función flecha:
Ejemplo de forEach()
map() - Transformar elementos de un array
Devuelve un nuevo array con los elementos transformados por una función.
Ejemplo de map()
Utilizando una función flecha
Ejemplo de map()
Método reduce() en Arrays
El método reduce() permite recorrer un array y acumular un resultado a partir de los elementos. Se utiliza comúnmente para sumar valores, calcular promedios o transformar datos de una colección. Es como una función de agregación en SQL, o un reduce en Excel.
Sintaxis de reduce()
| Sintaxis de reduce() | |
|---|---|
array.reduce((acumulador, elementoActual) => {
// Operación sobre cada elemento
return nuevoAcumulador;
}, valorInicial);
acumulador: Es el valor acumulado en cada iteración.elementoActual: Es el elemento actual del array en la iteración.valorInicial(opcional): Es el valor inicial del acumulador. Si no se proporciona, toma el primer elemento del array.
Ejemplo básico: Sumar elementos de un array
Ejemplo de uso de reduce()
| Suma de elementos con reduce() | |
|---|---|
El mismo ejemplo pero con la función flecha
Ejemplo de uso de reduce()
Ejemplo: Contar elementos con una condición
Ejemplo de contar elementos con reduce
| Contar elementos con reduce() | |
|---|---|
El miso ejemplo con la función flecha
Ejemplo de contar elementos con reduce()
reduce() es una herramienta poderosa cuando se necesita transformar un array en un único valor acumulado.
forEach vs for vs for...of en Arrays
Existen varias formas de recorrer un array en JavaScript, cada una con sus ventajas y desventajas:
forEach(): Es más limpio y legible cuando solo necesitamos aplicar una función a cada elemento.- El bucle
for: Ofrece más flexibilidad, ya que podemos acceder a los índices y modificar el array. Es útil cuando necesitamos hacer varias operaciones en cada iteración. - El bucle
for...of: Es una sintaxis más moderna para iterar sobre los valores de un array sin necesidad de acceder a los índices.
Ejemplo Comparativo: forEach vs for vs for...of
Comparación de forEach(), for y for...of
¿Cuándo usar forEach(), for o for...of?
| Método | Cuándo Usarlo |
|---|---|
forEach() |
Cuando solo queremos ejecutar una acción sobre cada elemento sin modificar el array ni necesitar el índice. |
for |
Cuando necesitamos acceder a los índices, modificar el array. Hay que realizar diversas operaciones en cada iteración |
for...of |
Cuando queremos recorrer directamente los valores del array sin preocuparnos por los índices. |
El forEach() es conveniente para realizar tareas simples sobre cada elemento, for nos da más control sobre la iteración, y for...of es una alternativa moderna y clara para recorrer los valores del array directamente.
Arrays Multidimensionales
Un array puede contener otros arrays dentro de sí, formando una estructura de datos multidimensional.
Ejemplo de array multidimensional
Recorrer un array multidimensional con for anidado
Ejemplo de recorrido con for anidado
| Recorrer array multidimensional | |
|---|---|
Retos
-
- Modifica el código anterior para que muestre el array completo en forma de matriz.
-
- Modifica el array completo para que muestre la diagonal principal de la matriz. (la diagonal principal son los elementos donde
iyjson iguales).
- Modifica el array completo para que muestre la diagonal principal de la matriz. (la diagonal principal son los elementos donde
Multiplicación de dos matrices
En este ejemplo, multiplicamos dos matrices A y B para obtener un resultado C. Para multiplicar dos matrices, el número de columnas de la primera matriz debe ser igual al número de filas de la segunda matriz. Podemos encontrar más información sobre multiplicación de matrices aquí
Ejemplo de multiplicación de matrices
Ejercicios sobre Arrays en JavaScript
A continuación, se presentan una serie de ejercicios que ponen en práctica los conceptos aprendidos en este tema.
Ejercicio 1: Crear un array y mostrar su contenido
- Crea un array con cinco nombres y muestra su contenido utilizando
for.
Solución
Retos
- a. Modifica el código anterior para que muestre los nombres en orden inverso.
- b. Modifica el código para que muestre solo los nombres que empiecen con la letra "A".
- c. Utiliza forEach para mostrar los nombres en lugar de un bucle
for.
Ejercicio 2: Buscar un elemento en un array
- Pide al usuario un nombre y verifica si existe en un array de nombres utilizando
indexOf().
Solución
Ejercicio 3: Uso de push() y pop()
- Crea un array vacío.
- Usa
push()para agregar tres elementos. - Usa
pop()para eliminar el último elemento y mostrar el resultado.
Solución
Retos
-
- Modifica el código para pedir al usuario los elementos a agregar hasta que ponga un 0. Si escribe -1 eliminamos el último elemento. En cada iteración mostramos el array.
Ejercicio 4: Filtrar elementos con filter()
- Crea un array de números.
- Usa
filter()para obtener solo los números mayores de 50.
Solución
Retos
-
- Modifica el código para que el usuario introduza un mínimo y máximo para filtrar. Ejemplo, si pone 10,20 sacaremos sólo los valores que están entre 10 y 20.
Ejercicio 5: Transformar elementos con map()
- Dado un array de precios en euros, conviértelos a dólares (suponiendo que 1€ = 1.1$).
Solución
Retos
-
- Modifica con un array de cambios (1-dolares, 2-yenes y 3-libras) con el valor de cada uno respecto al euro. Pide al usuario a qué moneda quiere cambiar los precios [1,2 o 3]. Y muestra los precios en la moneda seleccionada.
Ejercicio 6: Recorriendo un array con forEach()
- Dado un array de nombres, usa
forEach()para mostrarlos en la consola.
Solución
Retos
- a. Modifica el código para que muestre los nombres en mayúsculas.
- b. Modifica el código para que muestre los nombres con su longitud.
- c. Modifica el código para conseguir un array con el orden inverso.
Ejercicio 7: Uso de splice() para modificar un array
- Dado un array de colores
[rojo, verde, azul, amarillo], usasplice()para eliminar el segundo elemento y agregar un nuevo color en su lugar.
Solución
Retos
- a. Modifica el código para que el usuario pueda elegir el color a agregar y en qué posición lo quiere. Si el color está repetido, mostrar un mensaje de error.
- b. Modifica el código para que el usuario pueda elegir el color a eliminar. Si el color no se encuntra dar un mensaje de error.
Ejercicio 8: Uso de sort() y reverse()
- Dado un array de palabras, ordénalas alfabéticamente y luego en orden inverso.
Ejercicio 9: Matriz bidimensional
- Crea una matriz 3x3 e imprime todos sus elementos con un
foranidado.
Proyecto Final: Elección de Delegado
En este proyecto, gestionaremos la elección de delegado de clase. Contamos con 5 candidatos y 50 votos de alumnos. Nuestro objetivo es calcular el número de votos obtenidos por cada candidato y mostrar el ranking en orden descendente.
El inicio de nuestro programe debe ser:
| Elección de delegado | |
|---|---|
Solución con Bucles
Usaremos bucles para contar los votos y ordenar los resultados.
Solución con Bucles
Explicación del código:
La función compararVotos(a,b) es una función que:
Resta b.votos - a.votos, lo que significa que:
- Si b.votos es mayor que a.votos, devuelve un valor positivo, colocando b antes que a.
- Si b.votos es menor que a.votos, devuelve un valor negativo, colocando a antes que b.
- Si son iguales, mantiene su orden original.
El efecto es ordenar el array en orden descendente según la propiedad votos de los objetos.
Solución con Métodos de Arrays
Ahora usaremos métodos como reduce(), map() y sort() para simplificar el código.
Solución con Métodos de Arrays
| Elección de delegado con métodos de arrays | |
|---|---|
Esta segunda solución es más concisa y aprovecha mejor las funciones avanzadas de los arrays.