Arrays multidimensionals en Javascript

Com estem veient, els arrays són bastant importants en Javascript i també en la majoria dels llenguatges de programació. En concret ja hem après a crear arrays i utilitzar-los en articles anteriors de el Manual de Javascript. Però encara ens queden algunes coses importants que explicar, com són els arrays de diverses dimensions.

Els arrays multidimensionals són un estructures de dades que emmagatzemen els valors en més d’una dimensió. Els arrays que hem vist fins ara s’emmagatzemen valors en una dimensió, per això per accedir a les posicions utilitzem tan sols un índex. Els arrays de 2 dimensions guarden els seus valors, per dir-ho d’alguna manera, en files i columnes i per això necessitarem dos índexs per accedir a cadascuna de les seves posicions.

En altres paraules, una matriu multidimensional és com un contenidor que guardés més valors per a cada posició, és a dir, com si els elements de l’array fossin al seu torn altres arrays.

En estigui habilitat no hi ha un autèntic objecte array-multidimensinal. Per utilitzar aquestes estructures podrem definir arrays que on en cadascuna de les seves posicions hi haurà un altre array. En els nostres programes podrem utilitzar arrays de qualsevol dimensió, veurem a continuació com treballar amb arrays de dues dimensions, que seran els més comuns.

En aquest exemple crearem una matriu de dues dimensions on tindrem per una banda ciutats i per l’altre la temperatura mitjana que fa a cadascuna durant dels mesos d’hivern.

var temperaturas_medias_ciudad0 = new Array(3) temperaturas_medias_ciudad0 = 12 temperaturas_medias_ciudad0 = 10 temperaturas_medias_ciudad0 = 11 var temperaturas_medias_ciudad1 = new Array (3) temperaturas_medias_ciudad1 = 5 temperaturas_medias_ciudad1 = 0 temperaturas_medias_ciudad1 = 2 var temperaturas_medias_ciudad2 = new Array (3) temperaturas_medias_ciudad2 = 10 temperaturas_medias_ciudad2 = 8 temperaturas_medias_ciudad2 = 10

Amb les anteriors línies hem creat tres arrays d’1 dimensió i tres elements, com els que ja coneixíem. Ara crearem un nou array de tres elements i introduirem dins de cadascuna de polleguera els arrays creats anteriorment, de manera que tindrem un array d’arrays, és a dir, una matriu de 2 dimensions.

var temperaturas_cuidades = new Array (3) temperaturas_cuidades = temperaturas_medias_ciudad0 temperaturas_cuidades = temperaturas_medias_ciudad1 temperaturas_cuidades = temperaturas_medias_ciudad2

Veiem que per a introduir l’array sencer fem referència a el mateix sense parèntesis ni claudàtors, sinó només amb el seu nom. La matriu temperaturas_cuidades és el nostre array bidimensinal.

També és interessant veure com es realitza un recorregut per una matriu de dues dimensions. Per a això hem de fer un bucle que passi per cadascuna de les caselles de l’array bidimensional i dins d’aquestes fer un nou recorregut per a cadascuna de les seves caselles internes. És a dir, un recorregut per un array dins d’un altre.

El mètode per fer un recorregut dins d’un altre és col·locar un bucle dins d’un altre, el que es diu un bucle niat. En aquest exemple anem a ficar un bucle FOR dins d’un altre. A més, anem a escriure els resultats en una taula, el que complicarà una mica la seqüència, però així podrem veure com construir una taula des Javascript a mesura que vam realitzar el recorregut fet niu a el bucle.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>"); for (i=0;i<temperaturas_cuidades.length;i++){ document.write("<tr>") document.write("<td><b>Ciudad " + i + "</b></td>") for (j=0;j<temperaturas_cuidades.length;j++){ document.write("<td>" + temperaturas_cuidades + "</td>") } document.write("</tr>") } document.write("</table>")

Aquest script resulta una mica més complex que els vistos anteriorment. La primera acció consisteix a escriure la capçalera de la taula, és a dir, l’etiqueta <TABLE> juntament amb els seus atributs. Amb el primer bucle vam realitzar un recorregut a la primera dimensió de l’array i utilitzem la variable i per portar el compte de la posició actual. Per cada iteració d’aquest bucle vam escriure una fila i per començar la fila obrim l’etiqueta <TR>. A més, escrivim en una casella el nombre de la ciutat que estem recorrent en aquest moment. Posteriorment posem un altre bucle que va recorrent cadascuna de les caselles de l’array en la seva segona dimensió i escrivim la temperatura de la ciutat actual en cadascun dels mesos, dins de la seva etiqueta <TD>. Una vegada que acaba el segon bucle s’han imprès les tres temperatures i per tant la fila està acabada. El primer bucle continua repetint-se fins que totes les ciutats estan impreses i un cop acabat vam tancar la taula.

Nota: Hauràs pogut observar que en ocasions generar codi HTML des Javascript es fa complex. Però el problema no és només que el codi sigui difícil de produir, sinó el pitjor és que crees un codi difícil de mantenir, en el qual es barreja tant la part de la programació en Javascript amb la part de la presentació en HTML. El que has vist a més és només un codi ben simple, amb una taula realment elemental, imagina què passaria quan la taula o les dades fossin més complexos. Afortunadament, hi ha maneres de generar codi HTML de sortida millors que les que hem vist ara, encara que resulta una mica avançat per al moment en què estem. De totes maneres, et deixem un enllaç a el manual d’sistema de templates Javascript Handlebars, que és una alternativa de llibreria senzilla per generar sortida en HTML des Javascript.

Podem veure l’exemple en marxa i examinar el codi de l’ script sencer.

Inicialització d’arrays

Per acabar amb el tema dels arrays veurem una manera d’inicialitzar els seus valors alhora que ho declarem, així podem fer d’una manera més ràpida el procés d’introduir valors en cadascuna de les posicions de l’array.

El mètode normal de crear un array vam veure que era a través d’l’objecte Array, posant entre parèntesis el nombre de caselles de la matriu o no posant res, de manera que la matriu es crea sense cap posició. Per introduir valors a una matriu es fa igual, però posant entre els parèntesis els valors amb els quals desitgem omplir les caselles separats per coma. Vegem-ho amb un exemple que crea un array amb els noms dels dies de la setmana.

var diasSemana = new Array("Lunes","Martes","Miércoles,","Jueves","Viernes","Sábado","Domingo")

La matriu es crea amb 7 caselles, de la 0 a la 6 i en cada casella s’escriu el dia de la setmana corresponent (Entre cometes perquè és un text).

Ara anem a veure alguna cosa més complicat, es tracta de declarar l’array bidimensional que fem servir abans per les temperatures de les ciutats en els mesos en una sola línia, introduint els valors alhora.

var temperaturas_cuidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))

en l’exemple introduïm en cada casella de la matriu altre array que té com a valors les temperatures d’una ciutat en cada mes.

Javascript encara té una manera més resumida que la que acabem de veure, que expliquem en el primer article on tractem els arrays. Per a això simplement escrivim entre claudàtors les dades de l’array que estem creant. Per acabar anem a mostrar un exemple sobre com utilitzar aquesta sintaxi per declarar arrays de més d’una dimensió.

var arrayMuchasDimensiones = , , "acabo"], 2, 5];

En aquest exemple hem creat una matriu molt poc uniforme , perquè té caselles amb contingut de simples sencers i altres amb contingut de cadena i altres que són altres arrays. Podríem accedir a algunes de les seves caselles i mostrar els seus valors d’aquesta manera:

alert (arrayMuchasDimensiones)alert (arrayMuchasDimensiones)alert (arrayMuchasDimensiones)

Amb això hem arribat a la fi dels articles que tracten sobre arrays en Javascript i ara podem continuar amb una petita pausa i consells que vindran bé per millorar la nostra relació amb aquest llenguatge de programació.

Deixa un comentari

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *