En JavaScript, como en todos los lenguajes de programación, existen estructuras de datos que tienen como función el poder almacenar información. Imaginemos que debemos manejar diferentes variables relacionadas, por ejemplo, nombre, edad o dirección. En lugar de utilizar tres variables diferentes podemos agruparlos en la misma estructura de datos. Esta estructura es conocida como Array, que actúa como una variable en la que podemos introducir múltiples valores.
Así podemos almacenar variables y manejarlas de manera independiente cuando lo necesitemos usando un valor índice que nos permite especificar la posición a la que nos estamos refiriendo. Para poder trabajar con Arrays necesitamos recurrir a diferentes métodos de los que hablaremos a continuación.
El proceso para crear o declarar un Array es bastante sencillo. Básicamente debemos seguir el siguiente ejemplo:
var frutas = ["Manzana", "Banana"]
A continuación vamos a ver varias operaciones habituales con Arrays. Como por ejemplo para conocer su longitud podemos utilizar el método .length:
console.log(frutas.length) // 2
Aunque seguramente lo más interesante es conocer la forma de acceder a un elemento de Array mediante su índice. Esto se hace mediante un índice numérico:
var primero = frutas[0] // Manzana
Nota: Los índices de los arrays de JavaScript comienzan en cero, es decir, el índice del primer elemento de un array es 0, y el del último elemento es igual al valor de la propiedad length del array restándole 1.
Para recorrer un Array existen diferentes métodos aunque el más común es utilizar una estructura de bucle For, forEach o While. Por ejemplo:
frutas.forEach(function(elemento, indice, array) {
console.log(elemento, indice);
})
// Manzana 0
// Banana 1
En JavaScript un Array es un objeto mutable, es decir, podemos agregar o eliminar elementos fácilmente cambiando dinámicamente a medida que modificamos sus elementos.
Para añadir un elemento nuevo al final de un Array podemos utilizar el método Array.push();
var nuevaLongitud = frutas.push('Naranja') // Añade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]
Para añadir un eliminar un elemento del final de un Array podemos utilizar el método Array.pop();
var último = frutas.pop() // Elimina "Naranja" del final
// ["Manzana", "Banana"]
Del mismo modo existen otro método para añadir un elemento al principio de un Array. Para ello usaremos .unshift():
var nuevaLongitud = frutas.unshift('Fresa') // Añade "Fresa" al inicio
// ["Fresa" ,"Manzana", "Banana"]
Y para eliminar el primer elemento podemos utilizar .shift():
var primero = frutas.shift() // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]
En un artículo anterior hablábamos de indexOf(). Con este método podemos conocer la posición o índice que ocupa un elemento dentro de un Array:
frutas.push('Fresa')
// ["Manzana", "Banana", "Fresa"]
var pos = frutas.indexOf('Banana') // (pos) es la posición para abreviar // 1
Continuando con el ejemplo, conociendo la posición de un elemento podemos eliminarlo mediante el método .splice(). Para ello necesitamos pasar dos parámetros. La posición del primer elemento inicio que se elimina y el número de elementos a eliminar.
var elementoEliminado = frutas.splice(pos, 1)
// ["Manzana", "Fresa"]
De esta forma, .splice(pos, 1) empieza en la posición que nos indica el valor de la variable pos y elimina 1 elemento.
Y con esto llegamos al final de nuestro artículo de hoy. En él hemos hablado de los Array o Matrices en JavaScript y sus métodos de control más habituales. Por supuesto, de tanto resumir, nos hemos dejado algunas cosas en el tintero, pero que nadie se preocupe porque en siguientes artículos iremos entrando más en detalle.
Si te ha gustado el artículo, por supuesto no dudes en compartir, y si tienes alguna duda no olvides dejar tus comentarios.