Tema 5Arreglos

Hemos aprendido cómo utilizar variables para almacenar diferentes tipos de datos. Puede haber casos en los que necesitamos utilizar múltiples variables, lo cual implicaría tener que asignar un nombre a cada una. Esto claramente no es muy conveniente cuando necesitamos 100 o 200 variables, por lo que existe una forma de guardar muchos datos con un mismo nombre. A este tipo de variables se denomina arreglo ("array" en inglés), los cuales son muy útiles y están presentes en todos los lenguajes de programación. En otros lenguajes, los arreglos como listas de un tipo de dato en específico, pero en JavaScript podemos asignar cualquier tipo de dato a un elemento de un arreglo.

Los arreglos cuentan con varias funciones que nos ayudan a modificarlos u obtener información sobre ellos y sus elementos, como saber su longitud, agregar o borrar elementos, y ordenar los elementos, entre muchas otras.

Crear un Arreglo

Para declarar un arreglo también utilizamos la palabra reservada var con una pequeña variación: para el valor inicial encerramos entre corchetes [ ] una lista separada por comas con todos los valores iniciales que queramos en nuestro arreglo.

var miArreglo = ["Hola", "Mundo", 7]; //Arreglo con 3 valores

También podemos declarar arreglos vacíos:

var miArreglo = []; //Arreglo vacío, podemos insertar valores después accediendo a la variable

Acceder a los elementos y modificar un arreglo

Perfecto, hemos creado nuestro arreglo. Ahora, ¿cómo podemos acceder a los elementos dentro de él? Como un arreglo almacena varios valores, tenemos que ser un poco más específicos en la forma en la que accedemos a los valores. Esto se logra a través de algo llamado índices. La estructura de un arreglo se puede visualizar de la siguiente manera:

El índice es un valor entero que representa la posición de un valor en el arreglo. Algo muy importante que debes tener en cuenta, es que las posiciones dentro de un arreglo inician desde cero, es decir, al primer elemento se le asigna un 0 como posición, al segundo un 1 y así sucesivamente. Para acceder un elemento, escribimos el nombre del arreglo junto con el índice del valor que queremos encerrado entre corchetes. Observa este ejemplo para acceder y modificar a los 3 elementos del primer ejemplo anterior:

miArreglo[0] = "Hello"; //Cambiamos el string del primer valor
miArreglo[1] = miArreglo[1] + "!"; //Agregamos un ! al valor original
miArreglo[2] = 24 / 4; //Cambiamos al resultado de una operación

Métodos de Arreglos

Los arreglos forman parte de un tipo de datos conocido como objeto. A las funciones de un objeto se le conocen como métodos. Los objetos también pueden tener propiedades, que son valores asignados a un objeto. Tienen el mismo comportamiento que una variable, pero están asociadas con el objeto. Para utilizar los métodos y propiedades de un objeto, solo escribimos el nombre de nuestro arreglo, seguido de un punto y el nombre del método o propiedad. Aquí hay algunos ejemplos utilizando el arreglo anterior:

.length: Regresa la longitud del arreglo. (En realidad no es una función, sino una variable del objeto arreglo, por lo que no lleva paréntesis).

var miArreglo = ["Hola", "Mundo", 7];
var longitud = miArreglo.length; //3
console.log(miArreglo[miArreglo.length - 1]);//Esta línea imprime el último elemento del arreglo (el elemento con índice 2) en la consola

.pop(): Elimina el último elemento del arreglo.

var miArreglo = ["Hola", "Mundo", 7];
miArreglo.pop(); //Se elimina el 7

.push(elemento): Agrega un elemento al final

var miArreglo = ["Hola", "Mundo", 7];
miArreglo.push("nuevo"); //El arreglo ahora es ["Hola", "Mundo", 7, "nuevo"]

.shift: Elimina y regresa el primer elemento.

var miArreglo = ["Hola", "Mundo", 7];
var primero = miArreglo.shift(); //["Mundo", 7]

.unshift(elemento): Agrega un elemento al inicio del arreglo.

var miArreglo = ["Hola", "Mundo", 7];
miArreglo.unshift(5); //[5, "Hola", "Mundo", 7];

.splice(indice, n. de elementos, valores): Agrega y borra elementos de acuerdo a su posición. Regresa un arreglo con los elementos borrados. El primer parámetro es el índice en donde se agregarán elementos, el segundo es el número de elementos a eliminar y los siguientes son los valores que se agregan.

var miArreglo = ["Hola", "Mundo", 7];
var borrados = miArreglo.splice(1, 2, 8, "world"); //["Hola", 8, "world"]

Si no ponemos parámetros con valores para agregar, podemos usarlo para eliminar elementos en posiciones específicas:

var miArreglo = ["Hola", "Mundo", 7];
miArreglo.splice(1, 1); //miArreglo = ["Hola", 7]

.slice(índice inicial, índice límite): Similar a .splice pero no elimina ni agrega elementos. Sólo accede a porciones específicas de un arreglo y las regresa. Puede tener hasta dos parámetros, ambos índices del arreglo que serán el intervalo de elementos a copiar. El segundo parámetro es el límite, si sólo hay uno, copia todo a partir del primer índice.

var miArreglo = ["Hola", "Mundo", 7];
var miArreglo2 = miArreglo.slice(1, 2); // miarreglo2 = ["Mundo"];
var miArreglo3 = miArreglo.slice(0, 2); // miarreglo3 = ["Hola", "Mundo"];
var miArreglo4 = miArreglo.slice(1); // miarreglo4 = ["Mundo", 7];

Copia estos ejemplos y ejecútalos en la consola de tu navegador para checar sus resultados y los valores de los arreglos. Practica el uso de estas funciones pues es muy probable que termines utilizando alguna de ellas en el futuro.

Módulo 4

Tu Progreso