Manipulando Arrays

Después de haber aprendido a crear Arrays, corresponde ahora saber cómo manejarlos.

Por ello en este módulo te enseñaremos aquellos métodos de JavaScript que nos permiten acceder al array, agregar más datos, ordenarlos y eliminarlos.

Para comenzar abre tu IDE o editor y crea un array de 3 elementos. Por ejemplo:

var lenguajes = ["javascript", "php", "phyton"] ;

Métodos para manipular datos

·         Método Length

En el módulo anterior lo utilizamos para establecer la dimensión del arreglo, pero también podemos emplearlo para conocer la cantidad de elementos que contiene un array e incluso para redimensionarlo en caso de ser necesario. Veamos,

console.log(lenguajes.length);

Esta sentencia arrojará como resultado “3”, pues es la cantidad de elementos almacenados en el array lenguajes.

En caso de querer cambiar el tamaño del array podemos hacerlo escribiendo lo siguiente:

lenguajes.length = 2;

Esto hará que el array lenguajes disminuya su capacidad, lo que significa que el último elemento “Python” se dejará por fuera.

Otra acción que nos permite realizar el método Length, es agregar elementos en la posición final. Para ello escribimos lo que sigue:

lenguajes[lenguajes.length] = "C++";

Esta sentencia añadirá el elemento al final del array. Y como anteriormente habíamos redimensionado el array notarás que ahora en lugar de “Python”, aparecerá “C++”.

·         Método toString();

El método toString es útil para cuando necesitamos convertir todo el contenido un array en una cadena de caracteres, indiferentemente del tipo de dato que almacene.

var mostrar = lenguajes.toString();

console.log(mostrar);

El resultado será una cadena de elementos separados por coma.

Actuando como pila

Un arreglo puede comportarse como si de una pila de objetos se tratara, permitiendo que amontonemos y desamontonemos datos.

Cuando manejamos arrays en forma de pilas lo que estamos generando es que el elemento agregado de último sea el primero en ser eliminado. A este tipo de acción se le conoce como LIFO (Last in, First out / Último en entrar, Primero en salir).

Para realizarlo necesitaremos usar el método push para insertar y pop para remover.

·         Método push();

Si deseamos añadir un elemento al arreglo que ya hemos creado, bastará con escribir:

lenguajes.push ("java","visual basic","perl");

Con esto tendremos como resultado un array de 6 elementos.

·         Método pop();

Ahora bien, en el caso de querer eliminar un elemento, podemos hacerlo con el método pop. Este método eliminará el último elemento, lo que a su vez modificará su longitud.

lenguajes.pop ();

El resultado será un array de 5 elementos, pues habrá eliminado el último “perl”.

Si utilizas la sentencia [console.log(lenguajes);] para imprimir en pantalla lo verás.

Otros métodos

En el manejo de array existen otros métodos que pueden sernos de utilidad para acceder a los datos y manipularlos según la necesidad.

·         Método shift();

Sirve para obtener el primer elemento del array.

console.log(lenguajes.shift());

·         Método unshift();

Proporciona la posibilidad de añadir elementos al comienzo del arreglo. Podemos agregar uno o varios si lo deseamos.

lenguajes.unshift("python");

Agregamos el que previamente habíamos remplazado por C++ y ahora aparecerá antes de javascript

·         Método reverse();

Permite invertir el orden de los elementos.

console.log(lenguajes.reverse());

De manera que el primer elemento será entonces “visual basic”, mientras que el último será “python”

·         Método sort();

Ordena los elementos por orden alfabético. Es para ser usados con los array que contienen string, como el que estamos usando de ejemplo. Si lo usamos en arrays con datos numéricos no mostrará un orden correcto.

console.log(lenguajes.sort());

Nos devolverá [“C++”, “java”, “javascript”, “php”, “phyton”, “visual basic”]

·         Método slice();

Muestra el contenido del array según el rango que indiquemos.

console.log(lenguajes.slice(1,3)); 
// Mostrará el contenido de la posición 1 y 2

En este caso mostraría [“javascript”, “php “]

Como de seguro has notado, no incluye el argumento final indicado.

Por otro lado, si colocamos un solo argumento, lo tomará como inicio, de modo que mostrará los elementos desde esa posición hasta la última.

console.log(lenguajes.slice(3)); 
// Mostrará el contenido desde la posición 3 hasta el final

El resultado es [“C++”,”java”,”visual basic”]

·         Método splice();

Splice es un método que nos permite agregar y eliminar datos del array estableciendo rangos de posición:

• Supresión:

Sirve para eliminar datos según el rango indicado.

lenguajes.splice(0,1); 
// Eliminará elementos desde la posición 0 hasta la posición 1

En este caso tampoco se incluye el argumento final.

• Inserción:

Sirve para agregar elementos en la posición indicada. En este caso necesitaremos establecer tres argumentos: la posición de inicio, la cantidad de elementos que deseamos eliminar y los elementos que queremos insertar.

// Insertando un elemento sin eliminar ninguno

lenguajes.splice(1,0,'C');

Lo que hicimos fue añadir ‘C’ en la posición 1, haciendo que nuestro array sea ahora:

// Insertando varios elementos y eliminando elementos

lenguajes.splice(3,2,'C#','Objective-C');

En esta parte añadimos dos elementos el primero se posicionará en la posición 3 y el segundo en la posición que le sigue, en este caso 4. Ahora bien, también hemos eliminado dos elementos que vendrían siendo los que correspondían a la posición 3 y 4.

Es decir, nuestro array entonces sería:

De acuerdo al material desarrollado en el módulo anterior y el actual, hemos aprendido de manera muy sencilla como crear un arreglo a la cual podemos añadir la cantidad de datos que queramos indiferentemente de su tipo.

También aprendimos como acceder a los datos en caso de necesitar ordenarlos, agregar datos e incluso eliminar algún elemento.

Te recomendamos practicar lo que hasta ahora se ha visto en el curso y si tienes alguna duda puedes dejarla abajo en los comentarios, a la brevedad posible te responderemos.