Comunidad de diseño web y desarrollo en internet online

Tutorial de matrices y la clase Array

Este tutorial tiene por objeto explicar de forma clara y completa las propiedades de la clase Array. Para seguirlo, es útil tener Flash abierto para ir probando los ejemplos. De todos modos, el tutorial puede leerse sin necesidad de acudir a Flash, ya que al lado de todos los trace, escribí el resultado que producen al ser ejecutados. Es recomendado que sepas que es Actionscript antes de leer este tutorial. Aunque las funciones de estos arrays son las mismas en Javascript, Java y otros lenguajes de script.

Introducción

Los Arrays son muy útiles y necesarios para gran cantidad de aplicaciones. Desde un carrito de compras, hasta la creación de un juego de ajedrez (para almacenar las posiciones de las piezas). Por lo que siempre es útil entender cómo funcionan.

Un Array es un conjunto de datos, por ejemplo, una lista de usuarios de Cristalab:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");

En este caso, cada uno de los elementos del Array (es decir, los usuarios) se corresponde con un índice numérico que indica su posición en el Array.

Esto es en realidad bastante simple. En el caso anterior, para acceder al primer usuario, escribimos el nombre del Array seguido por el índice deseado entre corchetes:

trace (usuarios[0]); //Output: HernanRivas 

Noten cómo el primer elemento del Array es el número 0 y no el número 1.

Siguiendo la misma lógica, para acceder al segundo usuario, el índice al que referenciemos va a ser el 1 (para el tercero, el 2; para el cuarto, el 3; etc.):

trace (usuarios[1]); //Output: Zguillez 

Pero, también podemos usar una sintaxis similar para agregar un usuario:

trace (usuarios); //Output:HernanRivas,Zguillez,Zah
usuarios[3] = "MX";
trace (usuarios); //Output: HernanRivas,Zguillez,Zah,MX 

Nótese que si no indicamos el índice que nos interesa, obtenemos todos los elementos del Array.

Quizá queramos reemplazar un elemento, en este caso, un usuario que ingresamos mal. Entonces, volvemos a emplear la sintaxis anterior:

trace (usuarios); //Output: HernanRivas, Zguillez,Zah,MX
usuarios[3] = "Mx";
trace (usuarios); //Output: HernanRivas,Zguillez,Zah,Mx 

Cabría preguntarse si lo que está dentro de los corchetes puede ser "cualquier cosa". Pues bien, la respuesta es sí, siempre y cuando esa cosa pueda ser evaluada como un número. Puede ser una variable, una expresión o el resultado de una función:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah", "Mx");
//
devolverNumero = function () {
    return 3;
};
//
var numero:Number = 0;
//
trace (usuarios[numero]); //Output: HernanRivas
trace (usuarios[devolverNumero ()]); //Output: Mx
trace (usuarios[2 - 1]); //Output: Zguillez 

Por último, aclaro que 2 Arrays son iguales si y solo si uno es la copia del otro:

var usuarios1:Array = new Array ("HernanRivas", "Zguillez", "Zah", "Mx");
var usuarios2:Array = new Array ("HernanRivas", "Zguillez", "Zah", "Mx");
//
trace (usuarios1 == usuarios2); //Output: false 

Nota: ya veremos que hay una manera de solucionar los problemas que esto origina, usando toString

Por el momento, no nos vamos a ocupar de los Arrays multidimensionales, son complicados y los dejo para más adelante.

Métodos y propiedades de los arrays

Además de tener nuestro Array, acceder a sus elementos, agregar otros y reemplazarlos, se pueden hacer muchas cosas. Entonces, vamos a ver los métodos principales

concat

Como su nombre sugiere, concatena. Es decir, fusiona 2 Arrays. Esto es bastante simple, pero hay que tener en cuenta que fusiona 2 Arrays para formar otro (para agregar un Array al final de otro, hay que usar push, que explico más adelante).

En este caso, tenemos 2 Arrays, uno que contiene usuarios de sexo masculino y otro que contiene a las de sexo femenino, vamos a fusionarlos para obtener un Array con todos los usuarios, sin distinción:

var usuariosM:Array = new Array ("HernanRivas", "Zguillez", "Zah");
var usuariosF:Array = new Array ("Mx", "XK");
//
var usuarios:Array = new Array ();
usuarios = usuariosM.concat (usuariosF);
trace (usuarios); //Output: HernanRivas,Zguillez,Zah,Mx,XK
trace (usuariosM); //Output: HernanRivas,Zguillez,Zah
trace (usuariosF); //Output: Mx,XK 

Como se puede observar, concat no afectó a los Array originales.

Vale aclarar que éste método mantiene intacta la estructura de los Array multidimensionales.

join

Muy útil cuando queremos mostrar los Arrays. Lo que hace es convertir un Array a un String (cadena) reemplazando las comas por lo que sea que escribamos como parámetro. Es más simple si lo vemos con un ejemplo:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah 
trace (usuarios.join ()); //Output: HernanRivas,Zguillez,Zah 
//
trace (usuarios.join (" + ")); //Output: HernanRivas + Zguillez + Zah
trace (usuarios.join (", ")); //Output: HernanRivas, Zguillez, Zah 

pop

Elimina el último elemento del Array y devuelve ese elemento:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah 
trace (usuarios.pop ()); //Output: Zah 
trace (usuarios); //Output: HernanRivas,Zguillez 

Igualmente, no hace falta obtener el último elemento:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah 
usuarios.pop ()
trace (usuarios); //Output: HernanRivas,Zguillez 

push

Agrega un elemento al final del Array. Recuerdan al principio, cuando agregamos a Mx al Array usuarios? Bien, eso lo podríamos haber hecho con un push, algo bastante útil ya que no requiere que conozcamos el índice del último elemento del Array:

var usuarios:Array = new Array ("HernanRivas");
//
trace (usuarios); //Output: HernanRivas
usuarios.push ("Zguillez", "Zah");
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
usuarios.push ("Mx")
trace (usuarios); //Output: HernanRivas,Zguillez,Zah,Mx 

Vale aclarar que el push también respeta la estructura de los Arrays multidimensionales y que devuelve el largo del Array luego de incluido el/los elementos.

reverse

Como indica su nombre, invierte un Array. No requiere mayor explicación:

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
usuarios.reverse ();
trace (usuarios); //Output: Zah,Zguillez,HernanRivas 

Este método devuelve el Array invertido.

Como dije, los Arrays multidimensionales, los voy a explicar más adelante, pero para los que saben de lo que hablo, dejo un par de ejemplos para mostrar el funcionamiento con Arrays multidimensionales:

var usuarios:Array = new Array ("HernanRivas", ["Zguillez", "Zah"]);
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
usuarios.reverse();
trace (usuarios); //Output: Zguillez,Zah,HernanRivas 
var usuarios:Array = new Array (["HernanRivas", "Zguillez", "Zah"]);
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
usuarios.reverse();
trace (usuarios); //Output: HernanRivas,Zguillez,Zah 

shift

Elimina el primer elemento del Array.

var usuarios:Array = new Array ("HernanRivas", "Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
trace (usuarios.shift ()); //Output: HernanRivas
trace (usuarios); //Output: Zguillez,Zah 

Además, devuelve el elemento eliminado, pero al igual que en el caso del pop, se puede prescindir de obtenerlo.

slice

Este método es un poco más complicado que los anteriores. Lo que hace es tomar elementos de un Array para ubicarlos en otro, pero sin modificar el Array original.

Supongamos que tenemos un abecedario en un Array: a, b, c, d, e, f, g, h, i, j.....

Cada letra se corresponde con un valor numérico. Entonces, si queremos obtener un Array que consista de todas las letras de la c a la i, usamos un splice.

Primero, observamos que la c es el elemento de índice 2 y que la i es el de índice 8.

Veamos el código:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
var letrasSeleccionadas:Array = new Array ();
letrasSeleccionadas = abecedario.slice (2, 9);
//
trace (letrasSeleccionadas); //Output: c,d,e,f,g,h,i 

Observen cómo el índice final es el 9 en lugar del 8. Esto se debe a que no devuelve el último elemento. Es decir, si hacemos esto:

arrray.slice (2, 8);

Devuelve el elemento 2, 3, 4, 5, 6 y el 7. El 8 no lo incluye.

También podemos usar un índice negativo, que indica que toma los últimos x elementos, donde x es el número negativo que pasemos como parámetro:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
var letrasSeleccionadas:Array = new Array ();
letrasSeleccionadas = abecedario.slice (-3);
//
trace (letrasSeleccionadas); //Output: i,j,k 

splice

Éste es otro de los métodos complicados. Similar al slice, pero modifica el Array original borrando elementos. Además, devuelve los elementos eliminados. A diferencia del slice, lo que hacemos es pasarle el primer índice y el número de elementos a eliminar:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
//
trace (abecedario.splice (2)); //Output: c,d,e,f,g,h,i,j,k
trace (abecedario); //Output: a,b 

En este caso, como no especificamos cuántos elementos queremos eliminar, elimina todos desde el índice dado en adelante.

Éste sería un ejemplo donde si especificamos el número de elementos a eliminar:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
//
trace (abecedario.splice (2, 3)); //Output: c,d,e
trace (abecedario); //Output: a,b,f,g,h,i,j,k 

En este caso, eliminamos 3 elementos, el de índice 2, y los 2 siguientes, dejando el resto intacto.

También podemos usar valores negativos:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
//
trace (abecedario.splice (-2)); //Output: j,k
trace (abecedario); //Output: a,b,c,d,e,f,g,h,i 

Si hacemos esto, elimina los 2 últimos elementos del Array.

Pero, hay un tercer parámetro, que indica con qué reemplaza los elementos eliminados. En este caso, lo usamos para aclarar que se eliminaron algunos elementos:

var abecedario:Array = new Array ("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k");
//
trace (abecedario.splice (1, 9, "elementos eliminados")); //Output: b,c,d,e,f,g,h,i,j
trace (abecedario); //Output: a,elementos eliminados,k 

toString

Simplemente, convierte el Array en un String. Podría no resultar muy útil, pero es la mejor manera de comparar Arrays (recordemos que los Arrays solo eran considerados iguales si uno es la copia del otro). Si convertimos 2 Arrays a cadenas y las comparamos, vamos a obtener true si los 2 Arrays son iguales.

unshift

Similar al push. En este caso, agrega los elementos al principio del Array:

var usuarios:Array = new Array ("HernanRivas","Zguillez", "Zah");
//
trace (usuarios); //Output: HernanRivas,Zguillez,Zah
usuarios.unshift ("F")
trace (usuarios); //Output: F,HernanRivas,Zguillez,Za 

Aclaro que al igual que el push, unshift devuelve el elemento agregado y que respeta los Arrays multidimensionales.

length

Devuelve o modifica el número de elementos de un Array. Podemos usar este método para obtener cuántos elementos tiene el Array y, también para recortar un Array:

var usuarios:Array = new Array ("HernanRivas","Zguillez", "Zah");
//
trace (usuarios.length); //Output: 3
usuarios.length = 2;
trace (usuarios); //Output: F,HernanRivas,Zguillez
trace (usuarios.length); //Output: 2 

Ordenar arrays

Los Arrays pueden ordenarse, por ejemplo, alfabéticamente. No voy a profundizar mucho en este tema, pero creo que es útil dar una idea general:

var codigos:Array = new Array ("charly", "eco", "bravo", "alpha", "delta");
//
codigos.sort ();
trace (codigos); //Output: alpha,bravo,charly,delta,eco 

También, los puede ordenar de acuerdo a una función personalizada, en este caso, los elementos con menos letras van adelante (generando así una frase coherente):

var codigos:Array = new Array ("esta", "mar", "La", "calma");
//
ordenar = function (a, b):Number {
 var largoA = a.length;
 var largoB = b.length;
 if (largoA > largoB) {
   return 1;
 } else if (largoA < largoB) {
   return -1;
 } else {
   return 0;
 }
};
//
codigos.sort (ordenar);
trace (codigos); //Output: La,mar,esta,calma 

Por supuesto, esto es un ejemplo, hay mil maneras de organizar los Arrays. Simplemente armen una función con 2 parámetros (a y b). Esta función debe devolver 1 si A va después de B, -1 si B va antes que A y 0 si (en este orden en particular), A y B valen lo mismo.

Arrays multidimensionales

Un Array multidimensional contiene Arrays como elementos. Por ejemplo, el índice 0 contiene 2 elementos, uno de índice 0 y otro de índice 1. Entonces, para acceder a los elementos anidados, procedemos de la siguiente manera:

miArray[0][1]

Es decir, el primer índice entre corchetes y luego el siguiente, también entre corchetes.

Por ejemplo, el siguiente Array define un juego de ta-te-ti (o tic-tac-toe):

var juego:Array = new Array ();
//
juego = [[["X"], ["X"], ["O"]], [["O"], ["X"], ["O"]], [["X"], ["O"], ["X"]]];
trace (juego.length); //Output: 3 

En este caso, el Array juego, tiene sólo 3 elementos. Pero, cada uno de estos es un Array de 3 elementos. Por lo tanto, en total, tenemos 9 casillas.

Si se observa la estructura del Array anterior, se puede ver que cada 1 de los Arrays anidados corresponde a una columna distinta. Mientras que cada elemento de la columna es una fila.

Entonces, si queremos saber qué elemento tenemos en la casilla central, hacemos lo siguiente (en realidad, muestro varias posiciones en un sólo código):

// Ficha central:
trace (juego[0][1]); //Output: X
// Primera columna, primera fila:
trace (juego[0][0]); //Output: X
// Última columna, Última fila:
trace (juego[2][2]); //Output: X 

Es más, las fichas que mostramos son las que forman la combinación gaadora.

Sobre este tema, se ha dicho mucho en los foros. Por ejemplo, mi juego del buscaminas almacena las minas de esta manera, mi tip para crear cheatcodes y combos, emplea algunas de las propiedades y conceptos que discutimos en este tutorial. También recomiendo éste post dónde Zguillez y yo explicamos cómo trabajar con Arrays multidimensionales. Es imperdible la explicación de Zguillez acerca de cómo agregar elementos a una columna y a una fila de un Array bidimensional.

También carloz.yanez creó un tip sobre este tema (que, aún no tuve tiempo de leer en profundidad, pero por lo que leí hasta ahora está muy bueno).

Y, en caso de que empleen AS3, esta clase, hecha por Zguillez, les puede resultar muy útil.

Básicamente, eso es todo. Espero les haya resultado útil.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate