Lección 6: Array | Curso JavaScript

Lección 6: Array

Hay una variable puede contener más de un valor. Técnicamente es una estructura de datos que puede contener una colección de valores. O, en otras palabras, una variable que guarda una lista de otras variables. A esta característica se le denomina: array.

Crear

Un array vacío denominado semana.

// Vacío
const semana = [];

A continuación puedes ver un array relleno con los días de la semana.

// Lleno
const semana = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];

Leer

Para obtener un valor del array debes usar su posición envuelta en corchetes [] o la función at. Se empieza a contar por 0.

const semana = ['lunes', 'martes', 'miércoles', 'jueves', 'viernes', 'sábado', 'domingo'];

console.log(semana[0]);
// lunes

console.log(semana.at(0));
// lunes

Si quiero el segundo, usaré 1.

console.log(semana[1]);
// martes

console.log(semana.at(1));
// martes

Incluso puedes capturar usando valores usando índices negativos, aunque solo con at. Supongamos que quieres obtener el último elemento del array pero desconoces la longitud.

console.log(semana.at(-1));
// domingo

¿Y el penúltimo?

console.log(semana.at(-2));
// sábado

Longitud

Debes usar la variable length, que se encuentra dentro del array.

console.log(semana.length);

// 7

Añadir

Puedes concadenar el array con un nuevo valor, guardando el resultado en una nueva variable o sobrescribiendo el array original.

const dosMeses = meses.concat("Febrero");

console.log(dosMeses);
// ["Enero", "Febrero"]

console.log(meses);
// ["Enero"]

Otra opción es modificar el array con la función push().

let meses = ["Enero"];

meses.push("Febrero");
// 2

console.log(meses);
// ["Enero", "Febrero"]

Te devolverá la longitud del array.

¿Cual deberías utilizar? Depende de si trabajas mutando (modificando) las variables o no.

Eliminar

Primer elemento

Una estrategia es crear un array nuevo sin el primer elemento. Para ello podemos usar slice(1), clonará desde la posición que deseemos. En este caso de la primera en adelante.

const semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];
const semanaSinLunes = meses.slice(1);

// ["martes", "miércoles", "jueves", "viernes", "sábado", "domingo"]

Otra posibilidad es mutando el array con shift().

let semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];

semana.shift();

console.log(semana);
// ["martes", "miércoles", "jueves", "viernes", "sábado", "domingo"]

Último elemento

Podemos volvemos a utilizar slice. En este caso clonaremos desde la posición 0 a la penúltima (-1 o semana.length - 1).

const semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];

const semanaSinDomingo = semana.slice(0, -1);

console.log(semanaSinDomingo);
// ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"]

En caso de modificar el array, podemos usar pop().

let semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];

semana.pop();

console.log(semana);
// ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"]

Posición concreta

En los ejemplos eliminaremos sábado, que ocupa la posición 5.

Sin modificar el array original podemos realizar un filtrado con filter.

const semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];
const semanaSinSabado = semana.filter(function (valor, posicion) {
    return posicion !== 5
});

console.log(semanaSinSabado);
// ["lunes", "martes", "miércoles", "jueves", "viernes", "domingo"]

Si quieremos modificinar el array, disponemos de splice (no confundir con slice). El primer argumento es la posición y el segundo la cantidad de elementos a eliminar (en el ejemplo será 1).

let semana = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado", "domingo"];

semana.splice(5, 1);

console.log(semana);
// ["lunes", "martes", "miércoles", "jueves", "viernes", "domingo]

Avanzado

Funciones de Transformación, Conversión y Comprobación

Hay una serie de funciones que te serán de mucha ayuda para gestionar arrays.

  • filter
  • reduce
  • map
  • fill
  • find
  • includes, busca si existe un elemento dentro de un array.
  • some, te dice si un array cumple la condición en algún momento.
  • every, igual que some pero debe cumplirse siempre.
  • forEach, recorre un array obteniendo su posición y valor.

Puedes leer un resumen en el siguiente artículo de javascript funcional.

Set (Conjuntos)

Para evitar repeticiones dentro de un array puedes usar una herramienta creada con ese fin, el objeto Set(). El propósito no es sustituir el array sino evitar repeticiones cuando se añaden valores nuevos e informarte si ya existe. ¡Nada más!

Crear

Utiliza new Set().

let setPelis = new Set();

O parte con valores de un array.

let setPelis = new Set(["Lo que el viento se llevó", "La gran evasión"]);

Leer

No tiene sentido ser leído, ya que su objetivo es informarte si un elemento ya existe o evitar repeticiones, no recuperar valores por índices.

Longitud

Usa el valor size.

let setPelis = new Set(["Lo que el viento se llevó", "La gran evasión"]);

console.log(setPelis.size)
// 2

Añadir

Disponemos de una función llamada add().

let setPelis = new Set();

setPelis.add("Lo que el viento se llevó")
setPelis.add("Lo que el viento se llevó")
setPelis.add("La gran evasion")

console.log(setPelis)
// ["Lo que el viento se llevó", "La gran evasión"]

Comprobar si existe

Puedes usar has() con el valor que quieres comprobar en su parámetro de entrada.

let setPelis = new Set(["Lo que el viento se llevó", "La gran evasión"]);

console.log(setPelis.has("La gran evasion"))
// true

Eliminar

Puedes quitar valores usando delete() indicando como parámetro de entrada que deseas quitar.

let setPelis = new Set(["Lo que el viento se llevó", "La gran evasión"]);

setPelis.delete("La gran evasión");

console.log(setPelis)
// ["Lo que el viento se llevó"]
Actividad 1

Crea un array con productos e imprímelos por consola.

Actividad 2

Calcula la media de las siguientes notas

const notas_1 = [1, 7, 3];
const notas_2 = [9, 6, 2];
Actividad 3

A partir del siguiente array.

const lista_numeros = [2, 1, 6, 7, 6, 3];
  • Suma todos los números.
  • Imprime un número aleatorio de la lista.
  • Borra el primer número.
  • Borra el último número.
  • Vuelve a sumarlos.
  • Añade un 5.
  • Vuelve a sumarlos.
Actividad 4

Elimina, o crea un nuevo array de todos los dominios que no tengan la letra h.

const lista_dominios = ["hbo.com", "bbc.uk", "ebay.com", "hulu.com", "reddit.com", "adobe.es", "google.com", "huffingtonpost.com"];
Actividad 5

Crea una función que te devuelva pistas sobre una palabra a adivinar.

Las reglas serán las siguientes.

  • Las palabras serán siempre de 5 letras.
  • Si la letra coincide: 🟩
  • Si la letra existe, pero no esta en el lugar adecuado: 🟨
  • Si la letra no existe: ⬛

Ejemplo:


const solucion = "coche";

palabraSugerida("roble", solucion);

// ⬛🟩⬛⬛🟩

palabraSugerida("techo", solucion);

// ⬛🟨🟩🟩🟨

palabraSugerida("coche", solucion);

// 🟩🟩🟩🟩🟩

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café
Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario