Arrays en Javascript - Pablo Monteserín

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

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'];

Para acceder a cada uno de los elementos del array utilizaremos un número que indentifica su posición.

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

Métodos para manipulación de arrays

push / pop

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

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

slice / splice

const 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 indicada por el segundo parámetro
console.log(newArray); // ['cara sonriente']

const cosas = ['corazon', 'cara sonriente', 'sol'];
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']

shift / unshift

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

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

concat / indexOf

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

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

reverse

const cosas = ['corazon', 'cara sonriente', 'sol'];
const newArr = cosas.reverse();
console.log(newArr); // ['sol', 'cara sonriente', '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]); // corazon, cara sonriente, sol
}

for(index in cosas){
    console.log(index); // 0 1 2
}

for(element of cosas){
    console.log(element); // corazon, cara sonriente, sol
}

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 «.

2. Crea una función toArray que reciba dos valores y devuelva un array con estos dos valores.

Por ejemplo, la llamada:

toArray(5,9);

debería devolver el array [5, 9]

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

const numbers = [1,9,3,8,5,7]

4. Escribe una función llamada getFirstElement que reciba un array y devuelva el primer elemento.

Por ejemplo:

getFirstElement([1, 2]);

debería devolver 1.

5. Escribe una función llamada setFirstElement que reciba como parámetro de entrada un array y un valor cualquiera. El valor recibido debería reemplazar lo que haya en la primera posición del array. El array debería ser devuelto.

Ejemplo:

setFirstElement([1, 2], 3);

debería devolver [3, 2]

6. Escribe una función getLastElement que reciba un array como parámetro de entrada y devuelva el último elemento del array.

Por ejemplo:

getLastElement([1, 2]);

debería devolver 2.

7. 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

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

9. Selecciona un elemento del array arr de tal forma que una variable que debes declarar llamada myData sea igual a 8.

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [[10, 11, 12], 13, 14]
];
const myData = arr[?][?]; // Modificar únicamente esta línea para acceder al 8 del array bidimensional
console.log(myData);

const myData = arr[2][1];

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. Crear un array con cinco nombres de persona y recórrelo mostrando el texto «Conozco a alguien llamado «.

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

const numbers = [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. 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

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

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(board[0] + "|" + board[1] + "|" + board[2] + "\n" + board[3] + "|" + board[4] + "|" + board[5] + "\n" + board[6] + "|" + board[7] + "|" + board[8]);
}

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

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

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 la ficha X.

5. Ahora intentaremos no colocar siempre la misma ficha, (X), sino colocar una X o una O en función del jugador al que le tocaba mover. Para ello, cambiamos una variable booleana que determinará a que jugador le tocaba jugar:

isPlayer1 = !isPlayer1;

6. 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.

8. Juego del ahorcado.

Pasos para realizarlo:

Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar.
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, "_ ");

El usuario deberá ir introduciendo letra a letra hasta adivinar la palabra secreta.

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 (palabraSecreta[i]).