Con lo que hemos visto hasta este momento en el Manual de Mootools deberíamos haber aprendido a desarrollar nuestros propios scripts sencillos para hacer diversos efectos dinámicos, además de utilizar la programación orientada a objetos para reutilizar el código de los componentes Mootools en otras páginas web o en otras aplicaciones. Al menos hemos explicado en el manual para que cualquier persona, con unos conocimientos de nivel medio sobre Javascript, pueda saber lo suficiente de este framework para desenvolverse por si solo y perder el miedo a los habitualmente crípticos programas que se generan con Mootools.

Así que esperamos hasta este punto que las explicaciones hayan servido, por un lado, para clarificar la programación con Mootools y por otro, para ver que no es tan complicado y está al alcance de nuestras habilidades. Sin embargo, debo aclarar que aun nos falta bastante para poder dominar el framework Javascript, o al menos haber repasado sus principales funcionalidades.

Para poder explicar todo de una manera sencilla y adelantar lo suficiente para que nuestros conocimientos sean suficientes como para poder hacer ejemplos interesantes, nos hemos dejado una serie de temas en el camino que también resultan, sin lugar a dudas, esenciales para poder trabajar con Mootools. Es el caso del presente artículo, en el que vamos a explicar las funcionalidades avanzadas de los Arrays en Mootools.

Mootools dispone de una serie de librerías, denominadas Native, que ofrecen funcionalidades a distintos tipos y estructuras de datos, como los arrays, funciones, números, cadenas, clases hash, etc. Estos modulos Native extienden las características básicas de Javascript sobre estos elementos y nos vendrán muy bien para ahorrar código en nuestros scripts y facilitar la programación.

Así que, si ya estamos familiarizados con los Array de Javascript comprobaremos que Mootools nos ofrece bastantes ayudas para poder trabajar con estas estructuras de datos. Si no estamos familiarizados es igual, porque aprenderemos aquí a trabajar con ellos con las facilidades propias de Mootools.

Primero vamos a ver cómo podemos definir un array y sus contenidos de una manera cómoda, que es propia de Javascript (no hace falta Mootools para esto):

frutas = ["pera", "manzana", "uva"];

O un array de dos dimensiones, se podría definir así:

opcionesPrincipales = [
   ["Portada","http://www.guiarte.com/"],
   ["Guías de Guiarte.com", "http://www.guiarte.com/guias/"],
   ["Otras secciones", "http://www.guiarte.com/secciones/"],
   ["Servicios", "http://www.guiarte.com/servicios/"],
   ["Comunidad", "http://www.guiarte.com/usuarios/"]
];

Ahora vamos a aprender algunas funciones de Array que se utilizan bastante en Mootools. Pero antes debemos saber que los arrays en Javascript se utilizan como si fueran clases, con lo cual, tienen sus propios métodos y propiedades. Mootools lo que hace es definir una serie de métodos adicionales para los Array, unos más útiles que otros.

Método de array each

El método each permite iterar con todos los elementos de un array, para hacer cualquier cosa que necesitemos con cada uno de los item del array. Este es un método bastante importante, porque nos permite realizar cosas con los elementos del array con muy poco código. Por ejemplo: <p>
frutas = ["pera", "manzana", "uva", "naranja", "ciruela"];
frutas.each(function (valor, indice){
   alert("En el índice del array " + indice + " hay el valor " + valor);
});

Como vemos, el array tiene un método each que recibe como parámetro una función que se va a ejecutar con cada uno de los elementos del array. Esta función recibe como parámetro dos variables, una el valor del elemento actual del array con el que se está iterando y por otra parte, el índice del array. Así que dentro de la función realmente no tenemos acceso al array propiamente dicho sino al valor y al índice únicamente del elemento que estamos iterando.

Este código puede ponerse en marcha en una página aparte.

Ahora bien, each, recibe una segunda variable, llamada "bind", que es opcional. Si lo deseamos, por medio de esa variable podemos enviar un objeto que podrá utilizarse dentro de la función de each con la referencia "this". Esta variable this se utiliza en entornos de programación orientada a objetos, para referirse al objeto que está recibiendo un método. Nosotros ya explicamos un poco para qué servía el bind en el artículo Utilización de bind() en los eventos Mootools , la filosofía es la misma, pero aun así vamos a mostrar un ejemplo en el que sería interesante utilizar el bind en los each de array.

var Sumatorio = new Class({
   initialize: function(arrayNumeros){
      this.suma = 0;
      arrayNumeros.each(function(valor){   this.suma += valor;}, this);
   }
});

numeros = [20, 2, 3, 5, 10, 5];
miSumatorio = new Sumatorio(numeros);
alert (miSumatorio.suma);

En este código hemos creado una clase sumatorio, que recibe un array en el constructor y suma los valores de ese array, guardando el resultado en una propiedad "suma". Como podemos ver, en el constructor se utiliza each para recorrer los valores del array. El método each recibe dos parámetros, uno la función que tiene que ejecutarse para cada valor y otro el mencionado bind, que en este caso sería this, para que dentro de la función del each se pueda acceder a este mismo objeto que se está construyendo.

Así pues, dentro de la función del each, cuando hacemos esta instrucción:

this.suma += valor;

Mootools sabe que hay en this, porque se le pasó como parámetro al propio each al ser invocado.

Otra cosa que podemos ver aquí es que la función enviada como parámetro al each recibe sólo el parámetro "valor", ya que el parámetro indice no lo necesito, porque no pienso hacer nada con los índices.

Podemos ver este segundo ejemplo en marcha.

Sin duda, el método más interesante de los arrays es each, pero existen otros muchos métodos muy útiles para trabajo con arrays. Vamos a ver algunos ejemplos.

Método include de Array

Este método, que se invoca sobre un Array, recibe un valor y lo incluye dentro del array, si es que no estaba antes. Es decir, primero comprueba si ese valor existe dentro del array y si no existe luego crea una nueva casilla en el array y coloca ese valor en ella.

Por ejemplo podemos ver este código, para ilustrar su funcionamiento:

capitales = ["Madrid", "París", "Buenos Aires"];

capitales.include("Lima");
//ahora el array tiene los elementos Madrid", "París", "Buenos Aires", "lima"

capitales.include("Madrid")
//Madrid ya estaba, luego no incluye nada

capitales.each(function (valor){
   alert(valor);
});

Podemos ver este ejemplo en una página aparte

Método indexOf de Arrays Mootools

Este método sirve para saber el índice que ocupa un determinado elemento en un array, si es que existe. El método devuelve el índice donde se encuentre el valor que reciba por parámetro y -1 en caso que ese elemento no exista.

["Mercurio", "Tierra", "Venus"].indexOf("Venus")
//esto devuelve 2

["Mercurio", "Tierra", "Venus"].indexOf("Marte")
//en este caso indexOf devuelve -1

Método extend de Array

Este método sirve para añadir todos los elementos de un array a otro array, sin mirar sus contenidos y sin comparar si estaban o no antes esos contenidos en el array donde se van a añadir.

Podemos ver extend en funcionamiento en el siguiente código:

capitales = ["Madrid", "París", "Buenos Aires"];
nuevasCapitales = ["Ciudad de México", "Madrid"];

capitales.extend(nuevasCapitales);
//ahora el contenido del array es "Madrid", "París", "Buenos Aires", "Ciudad de México", "Madrid"

capitales.each(function (valor){
   alert(valor);
});

Como puedes ver el array que recibe el método extend se actualiza con los valores contenidos en el array que se recibió por parámetro en extend.

Puedes ver este ejemplo en marcha.

Conclusión sobre Native Array en Mootools

Lo cierto es que estas son sólo algunas de las utilidades añadidas por Mootools a los Arrays, pues tienen otra serie de métodos interesantes para hacer cosas como obtener el último valor de un array, obtener un valor aleatorio, limpiar un array, filtrarlo, vaciarlo, etc.

En la documentación de Mootools podemos encontrar más detalles sobre los métodos existentes para Array y ejemplos de uso. Nosotros quizás más adelante ampliemos estas informaciones o bien las dejaremos para el momento que las utilicemos en ejemplos.