Arrays JavaScript. -Cuando programamos, necesitamos almacenar valores para poder trabajar con ellos a medida que se va desarrollando el código, estos valores son almacenados por JavaScript mediante el uso de variables.
JavaScript, provee dos tipos de variables fundamentalmente;
Variables simples, que son aquellas capaces de almacenar un solo valor, (Number, Strings y Boolean )
Variables compuestas, que son aquellas que permiten almacenar un conjunto de valores (Arrays y Objetos)
Como decimos en todos los lenguajes de programación existen estructuras de datos (variables) especiales que nos sirven para guardar información más compleja que las variables simples.
Una de los dos tipos de variables compuestas en JavaScript son los Arrays en JavaScript, que son variables donde podemos introducir varios valores cada uno de ellos ubicado por la posición que ocupa dentro del Array.
Algunos ejemplos de Arrays JavaScript
// Declaración instanciando el Objeto Array
let array = new Array("a", "b", "c");
// Declaración literal
/* Array compuesto por variables del mismo tipo (String)*/
let array = ["a", "b", "c"];
/* Array vacío (0 elementos) */
let empty = [];
/* Array compuesto por diferentes tipos de variables (string, number, boolean) */
let mixto = ["a", 5, true];
En el último ejemplo mostrado vemos una característica mas de los Arrays JavaScript, al contrario de lo que ocurre en otros lenguajes de programación, JavaScript permite que se puedan realizar Arrays formados por distintos tipos de valores, no siendo obligatorio que todos los elementos sean del mismo tipo.
En ocasiones, a los Arrays en JavaScript, se les llama vectores, matrices e incluso arreglos. No obstante, el término Array es el más utilizado y es una palabra comúnmente aceptada en el entorno de la programación.
Así pues formalmente podemos definir los Arrays en JavaScript como una colección de elementos, que pueden ser todos del mismo tipo o cada uno de un tipo diferente, todos ellos asociados a una posición dentro del Array, que podemos almacenar en una sola variable.
El primer paso, como en cualquier variable en JavaScript, hay que declarar la variable mediante las palabras reservadas var, let o const seguida del nombre de la variable si es que declaramos un ámbito local para la variable, o con el nombre de la variable solamente si declaramos esta en un ámbito Global.
Las siguientes declaraciones crean Arrays en JavaScript equivalentes:
/* Declaración literal*/
let array = ["a", "b", "c"];
/* Declaración instanciando el Objeto Array */
let array = new Array("a", "b", "c");
Es importante que nos fijemos que la palabra Array se escribe con la primera letra en mayúscula. Cuando se instancia un objeto con el operador new, el nombre del objeto va en mayúsculas.
El array se puede declarar sin ningún contenido, como todas las variables en JavaScript, y sin especificar el numero de elementos o también especificando el número de elementos que va a tener.
Ejemplo de declaración de Array vacío sin numero de posiciones.
/* Declaración array*/ var amigos = new Array();
Declaración de Array vacío en el que indicamos que el array va a tener 3 posiciones:
/* Declaración array*/ var amigos = new Array(3);
En cualquiera de los dos casos, podemos modificar el numero de los elementos en cualquier momento durante la ejecución del script
Por supuesto también podemos Crear Arrays en JavaScript con elementos, veamos dos ejemplos equivalentes:
/* Declaración array literal*/
var amigos = ["Pepe", "Juan", "Fran"];
/* Declaración array instanciado*/
var amigos = new Array("Pepe", "Juan", "Fran");
Al ser un tipo de variable compuesta de múltiples valores debemos tener distintas maneras de poder acceder a cada uno de los elementos que forman el Array, para poder extraer el valor de una determinada posición, añadir nuevos elementos, borrar otros recorrerlo etc
Para trabajar supongamos que tengo el siguiente Array:
var amigos = ["Pepe", "Juan", "Fran"];
Para poder acceder a los elementos de un Array debemos tener claro el la posición que de cada elemento ocupa dentro del Array.
Los Arrays en JavaScript empiezan siempre en la posición 0 así para el ejemplo anterior tendríamos:
var amigos = ["Pepe", "Juan", "Fran"]; // posición 0 = "Pepe" // Posición 1 = "Juan" // Posición 2 = "Fran"
Esto nos da que la última posición de un Array será igual al número de elementos – 1, el anterior ejemplo tiene 3 elementos y su última posición es 2.
Teniendo claro este concepto podemos obtener el valor de cualquier posición de un Array mediante la sintaxis del corchete y mostrarlos en la consola de JavaScript así:
var amigos = ["Pepe", "Juan", "Fran"]; console.log(amigos[0]) // Posición 0 = "Pepe" console.log(amigos[1]) // Posición 1 = "Juan" console.log(amigos[2]) // Posición 2 = "Fran"
O mostrándolos en la pantalla así:
var amigos = ["Pepe", "Juan", "Fran"]; document.write(amigos[0]) // Posición 0 = "Pepe" document.write(amigos[1]) // Posición 1 = "Juan" document.write(amigos[2]) // Posición 2 = "Fran"
Si ponemos una posición que no existe mostrará un valor «undefined»
var amigos = ["Pepe","","Juan", "Fran"]; console.log(amigos[0]) // Posición 0 = "Pepe" console.log(amigos[1]) // Posición 1 = "" console.log(amigos[2]) // Posición 2 = "Juan" console.log(amigos[3]) // Posición 2 = "Fran" console.log(amigos[4]) // Posición 2 = undefined
Ojo la posición 1 nos devuelve un valor vacío porque si existe aunque no tenga un valor asignado, no así la posición 4 que al no existir devuelve undefined
Aunque existen una serie de métodos declarados para añadir o eliminar elementos de un Array en JavaScript, que veremos más adelante podemos realizar alguna de estas operaciones mediante la sintaxis del corchete accediendo a la posición de cada elemento.
veamos algunos ejemplos:
Dado un array vacío o ya con elementos podemos agregar nuevos elementos al final del mismo así:
var amigos = ["Pepe","","Juan", "Fran"];
amigos[4]= "Luis";
console.log(amigos[4]);
var mascotas =[];
mascotas[0]= "Perro";
console.log(mascotas[0]);
En ambos casos agregamos un nuevo elemento en la última posición del array.
Si añadimos un valor en una posición que no existe JavaScript creará tantas posiciones vacías como necesite hasta llegar a la que hemos añadido así:
var amigos = ["Pepe","","Juan", "Fran"];
amigos[5]= "Luis";
document.write(amigos);
/*Mostrara "Pepe","","Juan", "Fran","","Luis"*/
Del mismo modo podemos modificar el valor de una posición dentro de un array accediendo a la misma y asignándole otro valor así:
var amigos = ["Pepe","","Juan", "Fran"]; amigos[2]= "Luis"; console.log(amigos[2]); /* Ahora la posición 2 = "Luis"/
Y aunque técnicamente hablando no sería eliminar una posición también podemos ‘eliminarla’ por así decirlo y repito sin que sea la manera más ortodoxa de manejar Arrays en JavaScript igualando la posición a vacío «» así:
var amigos = ["Pepe","","Juan", "Fran"]; amigos[2]= ""; console.log(amigos[2]); /* Ahora la posicion 2 = ""*/
Como digo esta no es la mejor manera de hacerlo porque para eso ya tenemos los:
Cuando definimos un Objeto definimos también una serie de propiedades y funciones para ese Objeto, pues bien, un método, es una función que esta definida a partir de un Objeto y que ‘hace algo’ por así decirlo, los Arrays en JavaScript tienen definidos una serie estos entre los que podemos destacar:
Método length
Devuelve el numero de elementos de un array dado así:
var amigos = ["Pepe","","Juan", "Fran"];
console.log(amigos.length());
/* devuelve 4 */
Esto devolverá 4 y podemos hacer cosas como esta:
var amigos = ["Pepe","","Juan", "Fran"];
document.write("Tienes " + amigos.length + " amigos");
También podemos añadir nuevos elementos al Array sin saber cual es la posición final
var amigos = ["Pepe","","Juan", "Fran"];
amigos[amigos.length]= "Luis";
document.write(amigos);
Ya que siempre la última posición de un Array en JavaScript es el número total de elementos (array.length) porque como los Arrays en JavaScript comienzan desde 0 y .length cuenta desde uno siempre nos dará la posición final del Array.
De todos los Métodos para Arrays en JavaScript este, es quizás el más usado ya nos permite recorrer un array para efectuar cualquier operación en el como veremos mas adelante:
Método push()
Este método, transforma un array añadiendo al final los elementos proporcionados como parámetro y devolviendo la nueva longitud del array.
var amigos = ["Pepe", "Juan", "Fran"];
amigos.push("Ana", "Toni", "Luisa");
document.write(amigos);
Aquí estamos añadiendo («Ana», «Toni», «Luisa») al array ‘amigos’ ahora bien si queremos que push() devuelva la nueva longitud del array solo tenemos que igualarlo a una variable así:
var amigos = ["Pepe", "Juan", "Fran"];
let longitud = amigos.push("Ana", "Toni", "Luisa");
document.write(longitud);
Ahora push() añade los elementos al array y los cuenta devolviendo la nueva longitud (el numero de elementos) del Array
Método unshift()
Este método funciona igual que el método push(), solo que en vez de añadir los elementos al final de array, los añade al principio así:
var amigos = ["Pepe", "Juan", "Fran"];
amigos.unshift("Ana", "Toni", "Luisa");
document.write(amigos);
devolviendo también la longitud del array
var amigos = ["Pepe", "Juan", "Fran"];
let longitud = amigos.unshift("Ana", "Toni", "Luisa");
document.write(longitud);
Método pop()
Con este método eliminamos directamente el último valor del array
var amigos = ["Pepe", "Juan", "Fran"];
amigos.pop();
document.write(amigos);
Este método devuelve el valor del elemento eliminado así:
var amigos = ["Pepe", "Juan", "Fran"];
var elementoBorrado = amigos.pop();
document.write(elementoBorrado);
/* Devuelve "Fran" */
Método shift()
Igual que pop() borra el ultimo elemento, con el método shift() eliminaremos el primer elemento y ambas funciones devuelven el valor del elemento borrado:
var amigos = ["Pepe", "Juan", "Fran"];
amigos.shift();
document.write(amigos);
Este método devuelve el valor del elemento eliminado así:
var amigos = ["Pepe", "Juan", "Fran"];
var elementoBorrado = amigos.shift();
document.write(elementoBorrado);
/* Devuelve "Pepe" */
Método toString()
El método toString() obtiene una cadena de texto con el contenido de los elementos de un array separados por comas así:
var amigos = ["Pepe", "Juan", "Fran"];
var nombres = amigos.toString();
document.write(nombres);
/* Devuelve "Pepe,Juan,Fran" */
Método join()
El método join() obtiene una cadena de texto con el contenido de los elementos de un array separados por el carácter que le pasemos como parámetro:
Este método recibe un parámetro que será introducido entre cada elemento del array al formar el string. Dentro de comillas del argumento podemos agregar lo que queramos así:
var amigos = ["Pepe", "Juan", "Fran"];
var nombres = amigos.join(" : ");
document.write(nombres);
/* Devuelve "Pepe : Juan : Fran" */
Incluso podemos meter etiquetas HTML como parametro de join()
var amigos = ["Pepe", "Juan", "Fran"];
var nombres = amigos.join("
");
document.write(nombres);
/* Devuelve
"Pepe
Juan
Fran
" */
Si accedemos a la consola de JavaScript, vemos que join(), no modifica el array, solo lo formatea veámoslo:
var amigos = ["Pepe", "Juan", "Fran"];
var nombres = amigos.join("
");
console.log(nombres);
Método sort()
Con este método ordenamos alfabéticamente los elementos del array
var amigos = ["Pepe", "Juan", "Fran"];
var ordenados = amigos.sort();
document.write(ordenados);
Método reverse()
Si necesitamos invertir el orden en que se hallan los elementos de un array en JavaScript usaremos el método reverse():
var amigos = ["Pepe", "Juan", "Fran"];
var ordenadosReves = amigos.reverse();
document.write(ordenadosReves);
Este método no realiza ninguna ordenación, tan sólo invierte el orden en que esté cada elemento, moviendo el primero elemento a la última posición, el segundo a la penúltima, y así sucesivamente.
Método concat()
Con este método podemos unir dos arrays asi:
var amigos = ["Pepe", "Juan", "Fran"];
var amigos2 = ["Diana", "Noelia"];
var amigos3 = amigos.concat(amigos2);
document.write(amigos3);
Este método pone al final del array inicial, el array que le pasamos como parámetro de concat():
Método slice()
Este método extrae los elementos de un array dado contando desde la la posición del primer argumento (incluida), hasta la posición del segundo parámetro (excluida), veámoslo con un ejemplo para aclararlo:
var colores = ["amarillo", "anaranjado", "azul", "rojo", "verde"]
var extraidos = colores.slice(1,3);
document.write(extraidos);
/* Devuelve "anaranjado" , "azul" */
document.write(colores);
Observamos dos comportamientos de este método:
var colores = ["amarillo", "anaranjado", "azul", "rojo", "verde"]
var extraidos = colores.slice(1);
document.write(extraidos);
/* Devuelve "anaranjado" , "azul", "rojo" , "verde" */
Método splice()
El método splice(), cambia el contenido de un array quitando elementos existentes y/o agregando nuevos elementos, hay tres maneras distintas de utilizar este método.
Este método cuando extrae elementos, devuelve los elementos extraídos.
Especificando sólo dos argumentos: la posición del primer elemento que desea eliminar y el número de elementos a eliminar así:
var amigos = ["Pepe", "Juan", "Fran"];
var nuevoAmigos = amigos.splice(0,2);
document.write(nuevoAmigos);
/* devuelve Pepe,Juan los elementos extraidos*/
document.write(amigos);
/* El array original es modificado quitando los elementos extraídos Devuelve ahora "Fran"*/
Se puede insertar elementos en el array en una posición específica, proporcionando tres argumentos: la posición donde deseas agregar elementos, el número de elementos que desea eliminar y el elemento a insertar. Opcionalmente, se puede especificar una cuarta, quinta, o cualquier número de otros parámetros a insertar
var amigos = ["Pepe", "Juan", "Fran"];
amigos.splice(1,0,"Luis");
document.write(amigos);
/* Devuelve Pepe,Luis,Juan,Fran */
Si el segundo parámetro es un número mayor de cero elimina el numero de elementos que le indicamos en el segundo parámetro a partir de la posición indicada para insertar veamos como:
var amigos = ["Pepe", "Juan", "Fran"];
amigos.splice(1,2,"Luis");
document.write(amigos);
/* Devuelve Pepe,Luis ya que elimina 2 a partir de la posición 1 */
Si el segundo parámetro es 1 lo que estamos es reemplazando 1 solo elemento en la posición que indique el primer parámetro así:
var amigos = ["Pepe", "Juan", "Fran"];
amigos.splice(1,1,"Luis");
document.write(amigos);
/* Devuelve Pepe,Luis,Fran ya que reemplaza "Juan" por "Luis" */
Para trabajar con Arrays en JavaScript, es muy común tener que recorrer el array para multitud de operaciones, buscar un elemento, ordenarlos, rellenar un array y muchas otras cosas que podemos hacer con un array.
Existen distontos metodos para reccorer arrays uno de ellos, el tradicional por así decirlo es por medio de bucles y mas recientemente a partir del ECMAScript 6, principalmente JavaScript ha habilitado una serie de métodos que nos permiten recorrer arrays mas fácilmente.
Aunque existen distintos tipos de de estructuras de control de flujo, los llamados bucles en JavaScript, nos vamos a centrar en los mas eficientes para este fin.
Bucle for
En el vamos a establecer un contador, una condición habitualmente el numero de elementos de array y un incremento o decremento el contador así:
//Array a recorrer
let amigos = ["Pepe", "Juan", "Fran"];
// contador
let i;
// bucle
for (i = 0; i ');
}
El contador ‘let i;’ establece una variable antes de que comience el ciclo
La condición ‘amigos.length’ para que se ejecute el ciclo (i debe ser menor que 3).
El incremento ‘i++’ aumenta en contador en cada ejecución
Además tenemos dos variaciones del ciclo for que nos facilitan un poco la vida en función de lo que queramos extraer del array
Bucle for/in Que recorre las propiedades:
//Array a recorrer
let amigos = ["Pepe", "Juan", "Fran"];
var text = "";
var x;
for (x in amigos) {
text += amigos[x];
}
console.log(text)
Bucle for/of Que recorre recorre los valores:
//Array a recorrer
let amigos = ["Pepe", "Juan", "Fran"];
var x;
for (x of amigos) {
document.write(x + '
');
}
Nótese que aquí no llamamos a amigos en la posición x sino directamente a x ya que busco recoger el valor no la propiedad
En cualquiera de los dos casos no necesitamos contadores ni incrementos ni decrementos.
Método JavaScript Array forEach()
El método forEach() llama a una función una vez para cada elemento de un array, en orden uno después de otro, este método no se ejecutará en un array sin valores.
//Array a recorrer
let amigos = ["Pepe", "Juan", "Fran"];
amigos.forEach(myFunction);
function myFunction(item, index) {
document.write('Mi amigo numero '+ index + " es: " + item + "
");
}
Este método admite dos parámetros que nos permiten acceder directamente a la posición y al valor de cada elemento del array
Con esto terminamos esta extensa entrada sobre los Arrays en JavaScript, hay mas métodos y bucles pero bueno creo que con estos hemos visto los mas significativos.
