Arrays en Javascript

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de Javascript Online. Desde cero.

11.  
14.  
19.  
26.  

Un array es un tipo de dato que en lugar de almacenar un único valor puede almacenar una colección de valores.

Cada uno de estos valores será identíficado por un índice, que en el caso de Javascript, siempre será un índice numérico.

Imagina, por ejemplo, una estantería. Cada una de las baldas de la estantería tendrá un valor. Podemos identificar cada una de estas baldas con un número, que será cero para la primera balda, uno para la segunda y así sucesivamente.

Podrías crear un array que tuviese el contenido de esta estantería utilizando el siguiente código:

Declaración de un array:

const cosas = ['corazon', 'cara sonriente', 'sol'];
javascript array

Si quisieras recuperar el elemento cero de la estantería, tendrías un corazón. Si recuperas el elemento 1, tendrás una cara sonriente y si recuperas el elemento 2, tendrás un sol.

El código que podrías usar para almacenar cada uno de estos valores en una constante independiente, sería el siguiente:

console.log(cosas[0]); // corazon
console.log(cosas[1]); // cara sonriente
console.log(cosas[2]); // sol

Añadir y quitar elementos de un array

const cosas = ['corazon', 'cara sonriente', 'sol'];
console.log(cosas); // ['corazon', 'cara sonriente', 'sol'];

cosas.push('fresa'); // Añade elemento al final
console.log(cosas); // ['corazon', 'cara sonriente', 'sol', 'fresa'];

cosas.pop(); // Elimina el último elemento
console.log(cosas); // ['corazon', 'cara sonriente', 'sol']

const newArray = cosas.slice(1, 2); //Devuelve un recorte desde la posición indicada por el primer parámetro hasta la posición indcada por el segundo parámetro
console.log(newArray); // ['cara sonriente']

cosas.splice(1, 2) //Elimina, a partir de cierta posición (primer parámetro), el número de elementos indicado (segundo parámetro)   
console.log(cosas); // ['corazon']	

En javascript no existen los arrays asociativos

const arrayAsociativo = [];
arrayAsociativo['one'] = 'uno';
arrayAsociativo['two'] = 'dos';
arrayAsociativo['three'] = 'tres';

console.log(arrayAsociativo['two']);
console.log(arrayAsociativo.length);

Si cambiamos la palabra «Array» por el nombre utilizado para designar a cualquier otro objeto, el código continúa funcionando. Esto es así porque realmente estamos definiendo las propiedades de un objeto. (En javascript foo[«bar»] es lo mismo que foo.bar).

Recorrer los elementos del array

Aunque más adelante veremos formas más sofisticadas de recorrer un array, de momento vamos a recorrerlo utilizando el tradicional bucle for:

const cosas = ['corazon', 'cara sonriente', 'sol']

for (let i = 0; i < cosas.length; i++) {
    console.log(cosas[i]);
}

Ejercicios: Arrays

1. Crea un array con cinco nombres de persona y recórrelo con un bucle for mostrando el texto «Conozco a alguien llamado «.

Arrays en Javascript 1

2. Hacer los ejercicios de freecodecamp desde Nest one Array within Another Array hasta Shopping List.

3. Recorrer la siguiente lista con un bucle imprimiendo el doble de cada número:

my_list = [1,9,3,8,5,7]
Arrays en Javascript 2

4. Contar el número de elementos positivos, negativos y que valgan cero en un array de 10 enteros. Los valores habrán sido harcodeados en un array. La salida por consola debería ser similar a esta:

// Array con valores harcodeados: [1, 9, -3, 8, -5, 0, 3, 4, 6, -7]
Cantidad de positivos:  6
Cantidad de negativos:  3
Cantidad de ceros:  1

5. Leer 10 enteros harcodeados en un array y mostrar la media de los valores negativos y la de los positivos.

6. Hacer los ejercicios de freecodecamp desde Iterate with JavaScript While Loops hasta Iterate with JavaScript Do…While Loops.

Estructura foreach

Dado que en la mayoría de los casos recorremos un array llendo de uno en uno, desde el primer elemento hasta el último, el bucle forEach nos ofrece una sintaxis más simplificada que utilizar el tradicional bucle for.

const cosas = ['corazon', 'cara sonriente', 'sol']

cosas.forEach(cosa => console.log(cosa));

Ejercicios de arrays resueltos utilizando foreach

1. Crea un array con cinco nombres de persona y recórrelo mostrando el texto «Conozco a alguien llamado «.

Arrays en Javascript 3

2. Recorrer la siguiente lista con un bucle imprimiendo el doble de cada número:

my_list = [1,9,3,8,5,7]

3. Contar el número de elementos positivos, negativos y que valgan cero en un array de 10 enteros. Los valores habrán sido harcodeados en un array.

4. Leer 10 enteros harcodeados en un array y mostrar la media de los valores negativos y la de los positivos.

5. Hacer los siguientes ejercicios de JS Hero:

6. Hacer los siguientes ejercicios de JS Hero:

7. Tres en raya con alert y prompt.

Hacer el juego del tres en raya para dos jugadores.

Tendremos un bucle while con una condición que evalúa la variable haGanadoAlguien. Mientras que sea false, el bucle se irá ejecutando. Cuando sea true, el bucle terminará.

Pasos de resolución. Los siguientes pasos los daremos dentro de un bucle while, aunque este no lo implementaremos hasta el paso 5.

1. Mostramos el tablero llamando al método printBoard(). El tablero es un array de 9 posiciones.

const printBoard = () => {
       alert(tablero[0] + "|" + tablero[1] + "|" + tablero[2] + "\n" + tablero[3] + "|" + tablero[4] + "|" + tablero[5] + "\n" + tablero[6] + "|" + tablero[7] + "|" + tablero[8]);
}
Arrays en Javascript 4

2. Solicitamos al usuario que introduzca un número del 0 al 8.

Arrays en Javascript 5

3. Pondremos una X en la posición del array introducida por el usuario.

Arrays en Javascript 6

4. Metemos toda la lógica del juego dentro un bucle while, de tal forma que en cada iteración se solicite al jugador la posición a la que desea mover y coloquemos una ficha (una X o O) en dicha posición. Para ello, cambiamos una variable booleana que determinará a que jugador le tocaba jugar:

isPlayer1 = !isPlayer1;

5. Comprobamos si el jugador actual ha ganado llamando al método evaluateWin(). Si ha ganado, lo indicamos con un mensaje de alerta y cambiaremos el valor de la variable booleana que nos sirve como condición para seguir jugando.

El método evaluateWin() comprobará, mediante sucesivos if, si un jugador ha ganado. Devolverá true si lo ha logrado y false si no. Ten en cuenta que al principio de la partida como todas las casillas contienen un guión bajo (_) devolverá true. Este método debe evaluar que tres casillas son iguales y que ninguna de ellas es igual a un guión bajo.

Arrays en Javascript 7


8. Juego del ahorcado.

Pasos para realizarlo:

  1. Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar.
  2. Utilizando el siguiente código el programa creará una nueva palabra con tantos guiones bajos como letras tenga la palabra secreta.
let palabraConGuiones = palabraSecreta.replace(/./g, "_ ");
  1. El usuario deberá ir introduciendo letra a letra hasta adivinar la palabra secreta.
Arrays en Javascript 8
  1. Después de recoger la letra introducida por el usuario, utilizando un bucle for, iremos comparandola con las letras que tiene la palabra secreta. En caso de coincidencia utilizaremos la siguiente función no nativa para hacer el reemplazo (debe estar definida al principio del script):
String.prototype.replaceAt=function(index, character) { return this.substring(0, index) + character + this.substring(index+character.length); } 

Uso:

palabraConGuiones = palabraConGuiones.replaceAt(i*2, letra);

Para acceder a cada una de las letras de la palabra secreta y compararlas con las letra introducida por el usuario, podremos utilizar la función charAt() de Javascript o acceder a ellas como si fuese un array (secretWord[i]).

Arrays en Javascript 9
Arrays en Javascript 10
  1. Finalmente utilizaremos:
if(palabraConGuiones.indexOf("_")==-1) 

 para comprobar si el usuario ganó.

Arrays en Javascript 11

← Calcular el factorial con Javascript
Javascript map →