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]); // solMétodos para manipulación de arrays
push
Añade un elemento al final del array.
const cosas = ['corazon', 'cara sonriente', 'sol'];
cosas.push('fresa');
console.log(cosas); // ['corazon', 'cara sonriente', 'sol', 'fresa'];pop
Elimina el último elemento del array.
const cosas = ['corazon', 'cara sonriente', 'sol'];
cosas.pop();
console.log(cosas); // ['corazon', 'cara sonriente']slice
Devuelve un recorte desde la posición indicada por el primer parámetro hasta la posición indicada por el segundo parámetro
const cosas = ['corazon', 'cara sonriente', 'sol'];
const newArray = cosas.slice(1, 2); //
console.log(newArray); // ['cara sonriente']splice
Elimina, a partir de cierta posición (primer parámetro), el número de elementos indicado (segundo parámetro) .
const cosas = ['corazon', 'cara sonriente', 'sol'];
cosas.splice(1, 2);
console.log(cosas); // ['corazon']shift
Elimina el primer elemento del array y devuelve el elemento eliminado.
const cosas = ['corazon', 'cara sonriente', 'sol'];
const nuevaCosa = cosas.shift();
console.log(nuevaCosa); // corazon
console.log(cosas); // ['cara sonriente', 'sol'];unshift
Añade un elemento al principio del array.
const cosas = ['corazon', 'cara sonriente', 'sol'];
const nuevaCosa = cosas.unshift('luna');
console.log(nuevaCosa); // 4
console.log(cosas); // ['luna','corazon', 'cara sonriente', 'sol'];concat
Concatena dos arrays.
const cosas = ['corazon', 'cara sonriente', 'sol'];
const arr2 = ['luna'];
const newArr = cosas.concat(arr2);
console.log(newArr); // ['corazon','cara sonriente', 'sol', 'luna'];indexOf
Devuelve la posición del parámetroen el array.
const cosas = ['corazon', 'cara sonriente', 'sol'];
const pos = cosas.indexOf('sol');
console.log(pos); // 2
reverse
Invierte el orden de los elementos de un array.
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: 18. 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);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: 14. Leer los 10 enteros del siguiente array y mostrar la media de los valores negativos y la de los positivos.
[1, 9, -3, 8, -5, 0, 3, 4, 6, -7]5. Tres en raya con alert y prompt.
Hacer el juego del tres en raya para dos jugadores.
En un alert del navegador dibujaremos un tablero cuadrado de 9 casillas (3 casillas por lado). Cada jugador, por turnos, irá poniendo una X o una O en las casillas, sin superponerse, hasta que uno de los dos logre poner 3 fichas iguales en línea (en vertical, horizontal o diagonal).
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. Añadiremos 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á.
Tienes que decidir que código del anterior abarca el bucle while de tal manera que el usuario pueda ir introduciendo X en todas las casillas seleccionadas.
5. Comprueba que cuando el jugador mueve no haya en la posición donde ha movido. Para ello puedes usar:
- Un if else (mi opción favorita).
- Un bucle do-while.
- La instrucción continue.
6. 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;7. 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. Comprueba si al final del juego ha habido empate en caso de que nade haya ganado. Para ello podemos ver si hay guiones bajos en el tablero.
6. Juego del ahorcado.
El jugador debe acertar una palabra secreta que se muestra en pantalla utilizando guiones bajos. Para ello, se mostrará un prompt solicitando que introduzca una letra. Si la acierta, el guión bajo será sustituido por una letra. Si no, se le informará del error. Continuaremos con esta mecánica hasta que el jugador acierta la palabra secreta.
1. Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar. Para ello, crearemos un array de cuatro palabras y seleccionaremos una de ellas utilizando un número aleatorio.
2. Utilizando el siguiente código el programa creará una nueva palabra con tantos guiones bajos como letras tenga la palabra secreta.
let hiddenWord = secretWord.replace(/./g, "_ ");El código anterior contiene una expresión regular (reg exp o regular expresion) : /./g
La primera barra (/) indica que es el comienzo de la expresión regular. La segunda barra(/g , global) indica que se aplicará a todas las ocurrencias. El punto que hay en medio indica que estas ocurrencias serán todos los caracteres.
3. El usuario deberá ir introduciendo letra a letra hasta adivinar la palabra secreta. Para ello haremos un prompt que devolverá la letra que queremos evaluar. La almacenaremos en una constante.
4. Utilizando un bucle for, iremos comparando la letra introducida por el usuario con cada una de las letras de la palabra secreta. En caso de coincidencia, mostraremos un mensaje de alerta.
Para acceder a cada una de las letras de la palabra secreta y compararlas con las letra introducida por el usuario, tenemos dos opciones:
- Utilizar la función charAt(i)
- Utilizar la sintaxis de corchetes como si fuese un array (secretWord[i]).
5. Lo que queremos realmente no es mostrar un mensaje de alerta, sino poner la letra introducida por el usuario en la palabra con guiones en la posición que le corresponda. Para ello, en lugar de un alert, llamaremos a la siguiente función, que como podemos ver, recibe tres parámetros de entrada:
- la palabra con guiones en la que queremos para hacer el reemplazo.
- le letra que queremos reemplazar
- la posición en la que queremos cambiar el guión por la letra introducida por el usuario.
hiddenWord = replaceAt(hiddenWord, letter, i*2); // Multiplicamos la posición por 2 porque en un principio pusimos un guión bajo y un espacio en blanco por cada letra para poner los guiones y ahora tenemos en la palabra por guiones dos letras por cada letra de la palabra secreta.La función anterior no existe en Javascript, así que para poder usarla tendremos que declarar la función dentro de nuestro código. El código de la función que debemos declarar es el siguiente:
const replaceAt = (string, character, index) => {
return string.substring(0, index) + character + string.substring(index + character.length);
}El código quedaría con una estructura similar a la siguiente:
const replaceAt = (string, character, index) => {
return string.substring(0, index) + character + string.substring(index + character.length);
}
for(let i = 0; ...){
if(letraIntrocidaPorElUsuario === ...){
hiddenWord = replaceAt(hiddenWord, letter, i*2);
}
}
5. Introduciremos la mayor parte del código que hemos hecho hasta ahora dentro de un bucle while que se repetirá mientras el jugador no gane. En el siguiente paso definiremos el código que evaluará si el jugador ha ganado.
6. Finalmente utilizaremos…
if(!hiddenWord.includes("_")) … para comprobar si el usuario ganó.
