Arreglos

Cuando necesitamos almacenar un valor numérico, un caracter o una cadena de caracteres, declaramos una variable con un nombre significativo que nos permite almacenar ese tipo de dato.

como representar una coleccion de datos

Pero ... ¿ cómo hacemos para almacenar, manipular u operar una gran cantidad de elementos de un mismo tipo ? Por ejemplo: cómo haríamos para almacenar 30 números generados de manera aleatoria ? Si utilizamos una variable para cada uno de los números aleatorios, necesitamos definir 30 variables para almacenar cada número generado !

Para resolver esta situación los datos son agrupados en una nueva estructura de datos denominada arreglo (o array), que nos permite gestionar una colección de elementos de un mismo tipo ( por ejemplo: numérico o alfanumérico). Como toda variable debemos identificarla con un nombre significativo, de manera tal que el programador a partir de su nombre pueda representar la información que contiene.

Representación de arreglos

Ahora podemos pensar en definir una variable del tipo de datos Array que contenga una colección de 30 números aleatorios. Para acceder a cada uno de los elementos del array se utiliza un índice, a partir del cual vamos a poder manipular cada uno de los datos almacenados (los índices en js comienzan desde la posición 0).

¿ Cómo declaramos una variable de tipo Array ?

La declaración de una variable de tipo Array se realiza de la misma forma que se declara cualquier otra variable, asignándole un nombre significativo que represente al conjunto de datos que va a contener.

let nombreVariable = Array();

De esta manera podemos definir una variable "numeros_aleatorios" como una estructura del tipo Array de 10 elementos numéricos, de la siguiente manera:

let numeros_aleatorios = Array(10);

¿ Cómo asignamos valores a una variable de tipo Array ?

Si los valores que va a contener el arreglo se conocen de antemano, podemos asignarlos de manera inmediata en una única sentencia. Por ejemplo para asignarle una secuencia de 10 números seleccionados al azar a la variable definida anteriormente podemos hacerlo de la siguiente manera:

numeros_aleatorios = [20, 88, 17, 33, 20, 55, 12, 20, 78, 17];

También podemos asignar cada uno de elementos del arreglo accediendo a cada una de las posiciones del arreglo a partir de su índice como sigue:

numeros_aleatorios[0] = 20; // la 1ra posición del arreglo contiene el valor 20.
numeros_aleatorios[1] = 88;// la 2da posición del arreglo contiene el valor 88.
numeros_aleatorios[2] = 17;// la 3ra posición del arreglo contiene el valor 17.
numeros_aleatorios[3] = 33;// la 4ta posición del arreglo contiene el valor 33.
numeros_aleatorios[4] = 20;// la 5ta posición del arreglo contiene el valor 20.
numeros_aleatorios[5] = 55;// la 6ta posición del arreglo contiene el valor 55.
numeros_aleatorios[6] = 12;// la 7ma posición del arreglo contiene el valor 12.
numeros_aleatorios[7] = 20;// la 8va posición del arreglo contiene el valor 20.
numeros_aleatorios[8] = 78;// la 9na posición del arreglo contiene el valor 78.
numeros_aleatorios[9] = 17;// la 10ma posición del arreglo contiene el valor 17.

Tip

El primer elemento de un arreglo en javaScript, se encuentra en el índice 0 del arreglo.

¿ Cómo accedemos a cada uno de los elementos del arreglo ?

Ya sabemos como crear una variable del tipo Array en JavaScript y cómo asignarle un conjunto de elementos. Ahora es el momento de saber como acceder a cada uno de los elementos que contiene o almacena un arreglo. Cada uno de los elementos tiene asociado un índice, que indica la posición del elemento dentro del arreglo (comenzando desde la posición 0). Por lo tanto cada uno de los elementos del arreglo "numeros_aleatorios" que creamos, podemos obtenerlos de la siguiente manera:

Ahora ya estamos en condiciones de definir una variable que contenga 30 números generados de manera aleatoria, y luego vamos a visualizar cada uno de sus elementos .

Recorridos

El recorrido de un arreglo nos hace posible poder operar con sus elementos y realizar búsquedas. Puede ser necesario que el recorrido se realiace desde el elemento que se encuentra en la posición inicial, hasta el que se encuenta en la última posición; o desde la posición inicial hasta que se cumpla alguna determinada condición.

Cuando necesitamos recorrer todos los elementos de un arreglo para resolver un problema, debemos realizar un recorrido exhaustivo.

Cuando necesitamos recorrer un arreglo hasta que se cumpla una condición determinada, el recorrido de la estructura es parcial.

¿Cómo saber cuántas veces salió un número?

Si ahora queremos saber cuántas veces se encuentra el número 24 dentro del arreglo "numeros_aleatorios" , debemos recorrer cada uno de los elementos del arreglo y cada vez que encontramos el número 24 debemos incrementar en 1 la cantidad veces encontrado. En esta oportunidad tenemos que recorrer toda la estructura de dato (arreglo), desde la posición 0 hasta su (longitud - 1).

¿Cómo saber si un número se encuentra dentro del arreglo ?

Una manera es ir obteniendo cada uno de los elementos de la secuencia y verificando si el número obtenido coincide con el buscado. Por ejemplo si queremos saber si el 23 se encuentra dentro del arreglo numeros_aleatorios, obtenemos el número que se encuentra en la posición 0 y verificamos si el número de esa posición es el 23. Si la respuesta es verdadera debemos cortar el proceso de búsqueda caso contrario continuamos la búsqueda hasta encontrar el número o llegar al último elemento del arreglo.

Tip

La estructura repetitiva utilizada para recorrer el arreglo debe tener en cuenta que el recorrido no alcance la longitud del arreglo.

Propiedades y operaciones

A continuación vamos a listar algunas propiedades y operaciones que vamos a poder utilizar en nuestras implementaciones. ¡ A conocerlas !

length

La propiedad length nos indica la cantidad de elementos contenidos en un arreglo y se actualiza con cada nuevo elemento.

Representación de arreglos
unshift

Nos permite agregar un elementos al principio de un arreglo, que se envía por parámetro.

push

Nos permite agregar un elementos al final de un arreglo, que se envía por parámetro.

Representación de arreglos
pop

Nos permite eliminar el último elemento de un arreglo y lo retorna.

shift

Nos permite eliminar el primer elemento de un arreglo y lo retorna.


Ejemplos para probar las funciones del tipo de dato arreglo

¿Cómo cambio el orden de un arreglo?

Tip

Ojo!!! si pasas una variable de tipo array por parámetro a una función se pasa por referencia. Esto significa que si modificas el array dentro de la función, esos cambios se reflejarán fuera de la función, ya que ambos están apuntando a la misma ubicación de memoria.

Videos

Diplo2022 R6 Arreglos 1:Iniciando con Array en JS

Nos iniciamos en la estructura de datos Array en JS: creación, asignación de elementos y acceso. ¡Hola Mundo de los arreglos !.

Desafios

Llegamos a la sección más interesante, al momento en que ponemos en práctica todo lo que aprendimos sobre arreglos.

Nivel 1: Definimos e inicializamos nuestros primeros arreglos

Crear una carpeta R6 e implementar un script nivel1.js con la siguiente funcionalidad

Numeros pares:

Defina una variable del tipo Array en JS que contenga los primeros 5 números pares.

Vocales Mayúsculas:

Defina una variable del tipo Array en JS que contenga todas las vocales en mayúscula.

Trayectos de la Diplo:

Defina una variable del tipo Array en JS en la cual almacene cada uno de los trayectos de la Diplo: Entorno, Secuencias, Modularización, Alternativas, Repetitivas, Arreglos

Impares true:

Defina una variable del tipo Array de 9 elementos en JS, en la cual almacene el valor de verdad true para las posiciones del arreglo impar y el valor de verdad false para las posiciones del arreglo par.

Nivel 2: Crear / Cargar / Visualizar Arreglos

Dentro de la carpeta R6 implementar un script nivel2.js e implementar las siguientes funciones:

Visualizar elementos de un arreglo

Implementar la función visualizarArreglo que recibe por parámetro un arreglo, la cantidad de elementos que contiene y visualiza a cada uno de ellos.

Retornar un arreglo de números pares:

Implementar la función cargarNumerosPares que recibe por parámetro la cantidad de elementos que se desean almacenar (n), crea un arreglo y se solicitan al usuario cada uno de los elementos a almacenar. Se debe corroborar que el elemento a incorporar al arreglo sea un número par, caso contrario continuar con la carga hasta completar los n números que se desean almacenar.

La función debe retornar el arreglo creado con cada uno de los elementos almacenados

Retornar un arreglo de vocales Mayúsculas:

Implementar la función cargarVocalesMayusculas que recibe por parámetro la cantidad de elementos que se desean almacenar (n), crea un arreglo y se solicitan al usuario cada uno de los elementos a almacenar. Se debe corroborar que el elemento a incorporar al arreglo sea una vocal en mayúscula, caso contrario almacenar el caracter '-'.

La función debe retornar el arreglo creado con cada uno de los elementos almacenados

Retornar un arreglo con los trayectos de la Diplo:

Implementar la función cargarTrayectosDiplo que recibe por parámetro la cantidad de elementos que se desean almacenar (n), crea un arreglo y se solicitan al usuario cada uno de los elementos a almacenar. Se debe corroborar que el elemento a incorporar al arreglo sea una cadena de caracteres que se corresponde con algunos de los trayectos de la Diplo: Entorno, Secuencias, Modularización, Alternativas, Repetitivas, Arreglos , caso contrario almacenar la cadena 'N/C'.

La función debe retornar el arreglo creado con cada uno de los elementos almacenados

Retornar un arreglo con los resultados del juego

Implementar la función cargarResultado que recibe por parámetro la cantidad de elementos que se desean almacenar (n), crea un arreglo y se solicitan al usuario cada uno de los elementos a almacenar. Se debe corroborar que el elemento a incorporar al arreglo sea un valor booleano donde el valor true representa que el usuario adivino la trivia (i) caso contrario el valor a almacenar es false.

La función debe retornar el arreglo creado con cada uno de los elementos almacenados

Implementando un menú principal ..

Implementar un menú principal que visualiza una opción por cada una de las funciones implementadas y las invoque según sea necesario.

Tener en cuenta que la opción del menú que se corresponde con la invocación a la función que visualiza el arreglo, puede ser invocada en cualquier momento. El arreglo a visualizar se debe corresponder con el último arreglo generado

Nivel 3: Recorridos de Arreglos

Dentro de la carpeta R6 implementar un script nivel3.js e implementar las siguientes funciones:

Calculando la sumatoria

Implementar la función retornarSumatoria que recibe por parámetro un arreglo de números y retorna la sumatoria de cada uno de sus elementos.

¿Qué tipo de recorrido se utilizó para la implementación de la función?

Buscando la primer ocurrencia de un números

Implementar la función buscarPrimerOcurrenciaNumero que recibe por parámetro un arreglo de números y un número; y la función retorna la posición del arreglo en la que se encuentra la primera ocurrencia.

¿Qué tipo de recorrido se utilizó para la implementación de la función?

Buscando la última ocurrencia de un números

Implementar la función buscarUltimaOcurrenciaNumero que recibe por parámetro un arreglo de números y un número; y la función retorna la posición del arreglo en la que se encuentra la última ocurrencia de ese número.

¿Qué tipo de recorrido se utilizó para la implementación de la función?

Retornando arreglos

Implementar la función retornarArregloPosiciones que recibe por parámetro un arreglo de caracteres y un caracter, y la función retorna un arreglo con las posiciones en las que aparece ese elemento.

Utilizando propiedades de arreglos

En un salón se encuentra un grupo de 8 personas y se deben formar 2 equipos que van a competir y solo habrá 1 ganador. Luego se van a sortear a 2 referentes quienes serán las encargadas de ir seleccionando por turno a un miembro de su equipo. El propósito es implementar una aplicación para utilizar en la competencia.

Para ello se va utilizar un arreglo que inicialmente contendrá la cadena formada por '#' de manera tal que a la izquierda se encuentran los nombres del equipo A y a la derecha se encuentran los nombres de los miembros del equipo B.

Además se cuenta con un arreglo de preguntas que deben ser respondidas durante la competencia por los equipos de manera tal que: El equipo que responde correctamente hace que el equipo contrario pierda un jugador. Si el equipo responde de manera incorrecta, pierde un jugador. El juego termina cuando uno de los 2 equipos se queda sin integrantes.

Implementar una función que permita cargar un arreglo con las preguntas de la competencia y lo retorne. Utilizaremos las siguientes preguntas como ejemplo:

  1. Cuales son los nombres de los facilitadores de la Diplo ?.
  2. El último trayecto de la Diplo es Variables ?.
  3. En JavaScript los arreglos son una estructura alternativa?
  4. Cual es la mejor estructura repetitiva que mejor se adapta a la búsqueda exhaustiva?

Implementar una función retornarCopia que recibe por parámetro un arreglo y retorna otro que es una copia del recibido por parámetro.

Implementar la función cargarArregloJugadores que va a incorporar a cada uno de los miembros de cada equipo.

Implementar la función actualizarArreglo que recibe por parámetro el equipo que respondió correctamente la pregunta y retorna el arreglo de jugadores actualizado según corresponda.

Implementar la función visualizarEquipoGanador que va a informar el equipo que ganó la competencia y a cada uno de sus jugadores.

Implementar un menú que visualice todas las funciones y que permita registrar cada una de las acciones que se desencadenan en la competencia.

(*) En la implementación de la funciones utilizar las propiedades de arreglos vistas en el trayecto.

Desafío Dipli - ¿Cuál es el Número?

Considerando todo lo que hemos aprendido durante todo el trayecto de Arreglos, te proponemos que trates de incorporar esta nueva estructura de datos a este último desafío Dipli. Además de respetar las reglas ya planteadas en desafíos anteriores, también vamos a considerar que el desafío Dipli responda a las siguientes reglas:

VIDAS: Diplo va a desafiar al jugador dándole la posibilidad de seleccionar la cantidad de vidas que cree necesarias para ganarle a Dipli.
Cada una de los intentos del jugador se van a almacenar de manera tal que al finalizar el juego se pueda presentar un resumen que visualice la siguiente información:

  • Intento 1: número ingresado .... fallo por ....
  • Intento 2: número ingresado .... fallo por ....
  • ....
  • Intento n: número ingresado .... fallo por ....
Finalmente si:
  • El usuario pierde entonce Dipli le dice al usuario: “Claramente la cantidad de intentos no fueron suficientes”
  • Si el usuario gana entonces Dipli le dice al usuario: “Te desafío a que lo intentes con menos vidas !”
Suerte y a disfrutar programando con Dipli!
info

Dejanos tu comentario del Desafío Dipli que nos acompañó en todos los trayectos de la diplo en el siguiente enlace:
👉 aquí 👈.

Si queres compartir algo más sobre tu experiencia en la Diplo, es más que bienvenido tu comentario. Es muy valioso saber cómo viviste tu experiencia, nos ayuda a mejorar.