Tutorial Javascript parte 4 - Arrays (Simples, Asociativos y multidimensionales)

Bienvenid@s a la parte 4 del tutorial de Javascript, vamos a continuar viendo conceptos básicos del lenguaje javascript y en concreto los Arrays.

Abre el editor de código y crea un nuevo archivo, guárdalo como fundamentos-3.js en la carpeta javascript como siempre y embébelo en el archivo index.html ...

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="javascript/fundamentos-3.js"></script>
</head>
<body>
</body>
</html>

Un array es una lista indexada de elementos, al contrario que las variables que sólo pueden albergar un sólo valor, los arrays permiten agregar tantos valores como se necesiten.

Array simple

Un array empieza a indexar a partir de 0, es decir, al primer elemento de un array le corresponde el index 0 y escalando en 1 por cada nuevo elemento del array.

Podemos crear arrays de las siguiente formas ...

var lista = new Array();
lista[0] = "uno";
lista[1] = "dos";
lista[2] = "tres";
...

Otra forma ...

var lista = new Array("uno", "dos", "tres");

Y otra forma ...

var lista = ["uno", "dos", "tres"];

Ok, para acceder a uno de sus elementos pues lo haríamos de la siguiente forma ...

//Regresaría el primer elemento del array
document.write(lista[0]);

Arrays multidimensionales

Los arrays multidimensionales son aquellos arrays que contienes otros arrays entre sus elementos, ejemplo ...

var lista = [[1, "uno"], [2, "dos"]];

Para acceder a ellos tendremos que ir escalando el index jerárquicamente ...

//regresaría 2dos
document.write(lista[1][0] + lista[1][1]);

Arrays asociativos

Son aquellos arrays que en lugar de ir indexados numéricamente, para acceder a ellos hay que hacerlo a través de una clave string que lo asocia a un valor.

var lista = new Array();
lista["uno"] = 1;
lista["dos"] = 2;
lista["tres"] = 3;
...

Y para acceder a uno de sus elementos lo podríamos hacer de una de las dos siguiente formas ...

//Regresaría 3
document.write(lista["tres"]);
//Regresaría 3
document.write(lista.tres);

Bien, ahora es momento de ver el ejemplo de este capítulo, copia y pega el siguiente código en fundamentos-3.js y guárdalo ...

/* ARRAYS 

Los arrays son listas de elementos indexados, el primer elemento de un array empieza a 
través del index 0, incrementándose en 1 por cada elemento nuevo del array.
*/

var nombres = new Array("Pepe", "José", "Mario", "Antonio");

document.write("<p>" + nombres[1] + "</p>");

var nombres = ["Fernando", "Raul", "Roberto"];

document.write("<p>" + nombres[0] + "</p>");


/* ARRAYS ASOCIATIVOS

Los arrays asociativos son aquellos arrays a los cuales se les asocia una clave string para 
poder acceder a ellos.

*/

var moneda = new Array();

moneda["españa"] = "Euro";
moneda["EEUU"] = "Dolar";
moneda["argentina"] = "Pesos";
moneda["chile"] = "Pesos";
moneda["francia"] = "Euro";

document.write("<p>" + moneda["argentina"] + "</p>");

document.write("<p>" + moneda.EEUU + "</p>");

/* ARRAYS MULTIDIMENSIONALES

Los Arrays Multidimensionales son aquellos arrays que a su vez entre sus elementos también 
existen otros arrays.

*/

var usuarios = [["Pepe", 23], ["Manuel", 30], ["Fernando", 20]];

document.write("<p>Nombre: " + usuarios[1][0] + " Edad: " + usuarios[1][1] + "</p>");

Ahora abre index.html en el navegador ...

Ahora puedes continuar practicando creando nuevos Arrays y accediendo a sus elementos.

jQuery Manual

jueves, 9 de enero de 2014