Qué es y como usar un array o arreglo en javascript

¿Por qué están los Arrays en una lección separada?

¡Porque los arrays son impresionantes! ¡Los necesitas! Y debemos enfocarnos mucho en ellos para prepararte para la vida real 🙂

Dominar el uso de los arrays y bucles es una de las 5 habilidades fundamentales para construir algoritmos:

1. Variables.
2. Condicionales.
3. Arrays (Arreglos).
4. Loops (Bucles).
5. Funciones.

No, no, no… Espera... ¿Array? ¿Qué?

Un array es, normalmente, cualquier lista o colección de valores. Las reglas sobre cómo agregar o eliminar elementos de esa lista pueden cambiar de un lenguaje de programación a otro. Pero (en general) son la única forma en que los desarrolladores pueden crear elementos.

Los arrays son la única forma que tenemos para enumerar cosas; independientemente de la aplicación con la que estés trabajando, siempre tendrás cosas que enumerar. Por ejemplo, lista de estudiantes, lista de artistas, lista de transacciones... ¡Cualquier cosa!

Este tipo de datos hace muchas más cosas que los otros. Las listas son una de las pocas maneras de almacenar más de un tipo de dato en la misma variable.

Cada array tiene los mismos conceptos básicos:

Los elementos: Son los valores reales dentro de cada posición del array.

La longitud (length): es el tamaño o longitud del array (cuántos elementos tiene el array).

Índice (Index): es la posición del elemento.

☝️ Las posiciones de un array comienzan en cero (0); el primer elemento es el elemento en la posición cero (0)

¿Cómo declarar un array?

Hay muchas formas de declarar un arreglo o lista:

1let myArray = []; //lista vacia
2let myArray = ["Apple", "Orange", "Donkey"]; //con 3 elementos tipo string.
3let myArray = new Array(1,2,3,4,5); //¡No uses esto! Lee a continuación para saber por qué.

☝️ No declares los Arrays con la sintaxis new Array (), no se comportará correctamente haz clic aquí para ver los detalles.

Acceder a los elementos de un array

Para acceder a un elemento específico en una lista, necesitas el index. Llamamos index al valor entero que representa la posición del elemento que desea acceder/obtener/recuperar.

El índice siempre debe comenzar en cero (0). Esto significa que una matriz de 2 elementos puede tener index=0 o index=1. Intentar obtener la segunda posición devolverá "indefinido" porque significará que estamos intentando acceder al tercer elemento (que no existe). Por ejemplo, para obtener cualquier elemento en la matriz, puedes hacer lo siguiente:

1    console.log(myArray[0]); // Esto imprimirá el 1er elemento en la consola.
2let aux = myArray[5];
3    console.log(aux); // Esto imprimirá el 6to elemento en la consola.
4    console.log(myArray[myArray.length-1]); //Esto imprimirá el último elemento de la lista.

Actualizar Elementos en el Array

Si lo deseas, puedes restablecer o actualizar cualquier elemento dentro de un array usando el índice o index así:

1myArray[5] = 'cualquier valor';
2// Esto establecerá el valor 'cualquier valor' en el sexto elemento del array.

Añadiendo elementos (función push)

La única forma de agregar un nuevo elemento es al final de la lista, y deberás usar la función push() para eso.

1let myArray = ['Pedro','Juan','Maria'];
2    myArray.push('Chris');
3    console.log(myArray); //esto imprimirá ['Pedro','Juan','Maria','Chris'];

Pero… ¿Y si quiero agregar a Chris en la segunda posición?

Entonces… necesitas crear un nuevo arreglo vacío y comenzar a empujar los elementos en el orden en que los necesitas. En este caso será:

1let myArray = ['Pedro','Juan','Maria'];
2let myNewArray = [];
3    myNewArray.push('Pedro');
4    myNewArray.push('Chris');
5    myNewArray.push('Juan');
6    myNewArray.push('Maria');
7    console.log(myNewArray); //esto imprimirá  ['Pedro','Chris','Juan','Maria'];
8

Eliminando Elementos (función pop)

Eliminar un elemento tiene exactamente las mismas limitaciones que al agregar un elemento: solo puedes eliminar un elemento de la última posición con el método pop(). Si deseas eliminar un elemento diferente, deberás crear un nuevo array sin ese elemento en particular.

1let myArray = ['Pedro','Chris','Juan','Maria'];
2    myArray.pop();
3    console.log(myArray); //esto imprimirá ['Pedro','Chris','Juan']; 
4//Si deseas eliminar 'Chris', necesitas hacer lo siguiente: 
5let myNewArray = [];
6    myNewArray.push('Pedro');
7    myNewArray.push('Juan');
8    myNewArray.push('Maria');
9    console.log(myNewArray); // esto imprimirá ['Pedro','Juan','Maria'];

Eliminando/Añadiendo desde el Principio

Los métodos shift y unshift son como push y pop con la diferencia de que solo funcionan desde el principio de la lista.

1let myArray = ['Juan','Maria'];
2    myArray.unshift('Pedro');
3    myArray.unshift('Chris','Bob');
4    console.log(myArray); //esto imprimirá ['Chris','Bob','Pedro','Juan','Maria']; 
5//Si deseas eliminar 'Chris', necesitas hacer lo siguiente: 
6let myArray = ['Chris','Bob','Pedro','Juan','Maria'];
7    myArray.shift();
8    console.log(myArray); //esto imprimirá ['Bob','Pedro','Juan','Maria'];

Iterar en un Array (Bucle)

A veces, cuando trabajes con arrays, tendrás que hacer un bucle. Por ejemplo, ordenándolos manualmente; voltearlos, eliminar un elemento de una posición particular, etc.

Para crear tu bucle, necesitarás usar Array.length para obtener el tamaño actual del array. La mayoría de las veces, los elementos del arreglo cambian durante el tiempo de ejecución. Esta es la razón por la que la única forma de obtener el tamaño del array será usar la función array.length, así:

1let myArray = [3423,5,4,47889,654,8,867543,23,48,56432,55,23,25,12];
2    for (i = 0; i < myArray.length; i++) {
3    console.log(myArray[i]); //esto imprimirá el valor del elemento en la posición i
4}

🎥 En el siguiente enlace puedes encontrar un video explicando las diferentes maneras de recorrer un arreglo.

For…in…

Hay una gran adaptación de la sentencia for para iterar listas o arrays, así:

1let myArray = [3423,5,4,47889,654,8,867543,23,48,56432,55,23,25,12];
2    for (let index in myArray) {
3    console.log(myArray[index]);
4}
5//Esto imprime el valor del elemento en la posición index.

Eliminando de un Array

Es posible cortar un array en pedazos muy rápido, con las funciones de splice y slice.

Slice

Devuelve un nuevo array con una versión más pequeña del arreglo original. Debes especificar el índice de inicio y finalización del pedazo que quieres obtener.

Splice

Actualiza el array actual, devolviendo los elementos que se desean obtener. Debes especificar el índice de inicio y el número de elementos que se desean obtener desde el indice que has indicado.

☝️ Splice puede aceptar tantos parámetros opcionales como se quiera y estos sustituirán la parte del array que ha sido eliminada. De esta forma el primer parámetro indica el índice desde el cual empieza a borrar, el segundo parámetro cuantos elementos borrarás y del tercero en adelante los elementos que se insertan a partir de la posición que se indica en el primer parámetro.

Ejemplo:

1let y = [14, 3, 3245, 234, 52, 345, 3, 45, 23, 77];
2y.splice(2,4,'a');  //devuelve [3245, 234, 52, 345] 
3console.log(y); // [14, 3, 'a', 3, 45, 23, 77]

Podemos usar esta función para insertar elementos:

1let y = [14, 3, 3245, 234, 52, 345, 3, 45, 23, 77];
2y.splice(2,0,'a');  //devuelve [] 
3console.log(y); // [14, 3, 'a', 3245, 234, 52, 345, 3, 45, 23, 77]

Consulta la documentación.

Ordenando Arrays

Es muy común la necesidad de ordenar arrays. Por ejemplo: ordenar una lista de estudiantes por nombre. Tienes dos funciones para ordenar en JavaScript:

Sort y Reverse

Hacen lo mismo, excepto que Reverse lo hace al revés. Ambos ordenan usando la lógica de comparación de string, lo que significa que el string "25" es más grande que "100", porque "2" es más grande que "1".

1let frutas = ['Banana', 'Orange', 'Apple', 'Mango'];
2    frutas.sort();
3    console.log(frutas); // ['Apple', 'Banana', 'Mango', 'Orange']
4    frutas.reverse();
5    console.log(frutas); // ['Orange', 'Mango', 'Banana', 'Apple']

Ordenando números

Si quieres ordenar números reales, o si deseas ordenar arrays de manera diferente, debes usar una "función de comparación".

Tienes que definir una función que se encargue de las comparaciones. La función sort llamará a tu función en cada comparación y permitirá que tu función decida quién es el primero entre los dos elementos que se comparan.

1let puntos = [40, 100, 1, 5, 25, 10];
2    puntos.sort(function(a, b){return a – b});
3    console.log(puntos); //[ 1, 5, 10, 25, 40, 100 ]

Ordenando Objetos

Ahora que conocemos la función de comparación, podemos usarla para indicar a la función sort cómo ordenar nuestros propios objetos especiales, como aquí por ejemplo:

1let autos = [
2    {tipo:'Volvo', año:2016},
3    {tipo:'Saab', año:2001},
4    {tipo:'BMW', año:2010}];
5    autos.sort(function(a, b){return a.año – b.año});
6    console.log(autos); //[ { tipo: 'Saab', año: 2001 },{ tipo: 'BMW', año: 2010 },{ tipo: 'Volvo', año: 2016 } ]