Si tu tienes una lista de cosas de cualquier tipo, puedes guardarlas en variables individuales, sin embargo esto sería una mala idea a la larga, cuando se desea encontrar uno específico y en especial cuando se tienen grandes cantidades de elementos. Sintaxis del arreglo:
const array_name = [item1, item2, ...];
Se puede acceder a un elemento del arreglo por una referencia al número de índice. De esta manera:
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
La siguiente sentencia cambia el valor del primer elemento en las "frutas". frutas[0] = "Fresa";
Con JS, se puede acceder al arreglo completo referenciando su nombre.
Las variables de JS pueden ser objetos, los arreglos son un tipo especial de objetos, por esta razón se puede tener variables de diferentes tipos en un mismo arreglo. Incluso se puede tener un arreglo dentro de otro.
La propiedad length de un arreglo devuelve el tamaño del mismo, o sea el número de elementos que lo conforman. Esta propiedad es muy útil para poder sacar el último elemento del arreglo de esta manera: frutas[frutas.length - 1]
Para poder recorrer un arreglo, pasar por cada uno de los elementos para poder utilizarlos o encontrar alguno en específico, es recomendable utilizar la función for para formar un ciclo que cubra todos los elementos del arreglo.
La manera más simple e intuitiva de agregar un nuevo elemento a un arreglo es usando el método push().
const instrumentos = ["Piano", "Guitarra", "Violin"];
instrumentos.push("Flauta"); // Añade (Flauta) a instrumentos
A Pesar que en JS los arreglos tengan objects como tipo de dato, no son precisamente objetos ya que los arreglos funcionan con índices numéricos mientras que los objetos utilizando índices nombrados.
const instrumentos = ["Piano", "Guitarra", "Violin", "Chello"];
let fLen = instrumentos.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + instrumentos[i] + "</li>";
}
text += "</ul>";
Con este código en JS podemos crear una lista no ordenada en HTML con los elementos pertenecientes al arreglo de preferencia.
Se utiliza el método toString() para convertir un arreglo en string, se separa con comas cada uno de los elementos. Para esto también se puede hacer uso de la función join() que hace prácticamente lo mismo con la diferencia que en esta se puede definir el separador que se utilizara entre los elementos del arreglo.
const frutas = ["Banano", "Naranja", "Manzana", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
La salida de esta funcion seria: "Banano * Naranja * Manzana * Mango"
El método pop() remueve el último elemento del arreglo y retorna este mismo elemento.
El método push() utiliza el parámetro para agregarlo como elemento al arreglo que lo invoca.
El método shift() funciona de manera similar a pop() pero en vez de eliminar el último elemento, elimina el primero y reduce en 1 el índice del resto de elementos del arreglo, e igual que pop() retorna este valor que extrae.
El método unshift() añade un nuevo elemento al principio del arreglo, y aumenta en 1 el índice del resto de elementos.
El método splice() añade nuevos elementos a un arreglo.
const frutas = ["Banano", "Naranja", "Manzana", "Mango"];
frutas.splice(2, 0, "Limon", "Fresa");
El arreglo frutas quedaria asi: "Banano, Naranja, Manzana, Mango, Limon, Fresa". Sintaxis:
El método slice() saca una pieza del arreglo para introducirlo en otro arreglo.
const frutas = ["Banano", "Naranja", "Limon", "Manzana", "Mango"];
const citricos = fruits.slice(1, 2);
El arreglo citricos se quedaria con los elementos: “Naranja, Limon” extraídos del arreglo frutas.
Si no se especifica el segundo parámetro la función interpretará que se desea extraer todo a partir de ese punto.
El método sort() ordena alfabéticamente un arreglo.
const frutas = ["Banano", "Naranja", "Limon", "Manzana", "Mango"];
frutas.sort();
El método reverse() revierte el orden de los elementos en el arreglo.
Ordenar números como string puede ser un tanto más complicado que palabras, ya que “alfabéticamente” 24 iría después que 100 ya que 2 va después de 1 es por esto que para hacerlo funcionar correctamente hay que utilizar una sintaxis en específico.
const numList = [40, 100, 1, 5, 25, 10];
numList.sort(function(a, b){return a - b});
Se puede utilizar math.max.apply para encontrar el número mayor de un arreglo numérico.
Se puede utilizar math.min.apply para encontrar el número menor de un arreglo numérico.
En el apartado inicial de arreglos ya vimos como utilizar el bucle for para recorrer el arreglo, sin embargo hay formas más eficientes de hacer esto mismo. El método forEach() llama una vez a la función por cada uno de los elementos del arreglo.
const numeros = [45, 4, 9, 16, 25];
let txt = "";
numeros.forEach(myFunction);
function myFunction(value, index, array) {
txt += value + "<br>";
}
La función toma 3 argumentos, los cuales son:
El método map() crea una nueva matriz realizando una función en cada elemento de la matriz. El método map() no ejecuta la función para elementos de matriz sin valores. El método map() no cambia la matriz original. Igualmente toma los mismos argumentos que la función para forEach().
El método filter() crea un nuevo arreglo utilizando los elementos de otro arreglo haciendo uso de una o varias restricciones.
El método reduce() corre una función en la que cada elemento del arreglo produce o se reduce a un único valor. Este método recorre el arreglo de izquierda a derecha como se esperaría, si se desea hacer de manera inversa está la función reduceRight().
El método every() revisa si el valor de cada uno de los elementos del arreglo pasan un criterio definido.
El método some() revisa si algún elemento cuenta con un valor que pase un criterio definido.
El método indexOf() busca en un arreglo un elemento según un valor seleccionado como parámetro y retorna su posición.
El método lastIndexOf() hace lo mismo que indexOf() pero toma en cuenta que 2 o más elementos pueden tener el mismo valor así que elige el último elemento agregado con ese valor definido para retornar su posición.
El método find() devuelve el valor del primer elemento del arreglo cuyo valor pase el criterio definido.
const numeros = [4, 9, 16, 25, 29];
let first = numeros.find(myFunction);
function myFunction(value, index, array) {
return value > 18;
}