¿Trabajando con arrays en JavaScript?

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.

Cómo declarar un Array

El proceso para crear o declarar un Array es bastante sencillo. Básicamente debemos seguir el siguiente ejemplo:

var frutas = ["Manzana", "Banana"]

Operaciones habituales con Arrays

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.

Recorrer un Array


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

 

Añadiendo o eliminando elementos a un Array

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.

Agregar elemento al final de una matriz.

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"]

Eliminar el último elemento de un Array

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"]

Añadir un elemento al principio de un Array

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"]

Eliminar el primer elemento de un Array

Y para eliminar el primer elemento podemos utilizar .shift():

var primero = frutas.shift() // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]

Encontrar el índice de un elemento del Array

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

Eliminar un único elemento mediante su posición

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.

 

Conclusión:

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.