Declarar un Array
Un Array es una variable que contiene múltiples valores, ordenados mediante un índice numérico. Hay diferentes maneras de declarar Arrays.
Ejm
const arreglo = [];
const arreglo2 = [1, true, "Hola", ["a", "b"]];
const arreglo3 = Array.of("x", "y", "z"); // OTRA FORMA
const d = Array(100).fill(false); // CREA 100 POSICIONES CON EL VALOR
false
Los Arrays comienzan en la posición número cero.
Propiedades
- arreglo.length: devuelve el número de elementos
En los objetos compuestos se accede a la referencia del valor, es decir, como si fuera una coordenada. Si queremos imprimir solo una referencia utilizaremos la siguiente sintaxis, usando nuestra terminal.
console.log(arreglo2[0]); // DEVUELVE EL PRIMER ELEMENTO
console.log(arreglo2[0]); // DEVUELVE EL SEGUNDO ELEMENTO
Prácticas que no se usan para definir Arrays
Ejm
const a = new Array(); // NO SE USA
const b = new Array(1,2,3,true,false);
Métodos de los arreglos
Estos son algunos de los métodos mas usados con Arrays.
- push(): agrega un elemento al final.
- pop(): quita el último elemento.
Ejm
const colores = ["Rojo", "Verde", "Azul");
console.log(colores);
colores.push("Negro"); /* INCLUYE EL COLOR Negro AL ARRAY colores,
LO PONE SIEMPRE AL FINAL */
colores.pop(); // ELIMINA EL ÚLTIMO VALOR DEL ARREGLO
Los Arrays tienen una gran cantidad de métodos como map(), filter(), any()… Podemos buscar todas sus propiedades y métodos desde MDN.
Método forEach()
EL método forEach() permite ejecutar una función por cada elemento que tenga nuestro Array. Recibe una función como callback que se va a ejecutar por cada elemento que tenga. Al método forEach() se le suele pasar un parámetro que es el elemento que en ese momento se está iterando, dicho parámetro suele tener el nombre el.
Ejm
colores.forEach(function(el){
console.log(`<li>${el}</li>`);
});
Ejm completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arreglos (Arrays)</title>
</head>
<body>
<h1>Arreglos (Arrays)</h1>
<script>
const colores = ["Rojo", "Verde", "Azul"];
colores.push("Negro");
console.log(colores);
console.log();
colores.pop();
console.log(colores);
console.log();
// MÉTODO forEach CON FUNCIÓN ANÓNIMA
colores.forEach(function (el) {
console.log(`(Función anónima). El Color es: ${el}`);
});
console.log();
// MÉTODO forEach CON ARROW FUNCTION
colores.forEach((el) => {
console.log(`(Arrow Function / Función Flecha). El color es: ${el}`);
});
console.log();
// SEGUNDO PARÁMETRO
colores.forEach(function (el, index) {
console.log(`<li id="${index}">El color es: ${el}</li>`);
});
</script>
</body>
</html>
Al primer parámetro se le suele poner element o el, y al segundo parámetro se le suele poner index o i. El index sería el índice que ocupa el elemento dentro de las posiciones del elemento padre, y el o element es el mismo elemento en cuestión.