Arreglos en JavaScript

En este capítulo, exploraremos los arreglos en JavaScript.

En JavaScript, puedes usar arreglos para almacenar múltiples valores en una sola variable.

Podemos describir un arreglo como una variable única capaz de contener más de un valor simultáneamente.

Existen dos sintaxis para generar un arreglo vacío:

let arr = new Array();
let arr = [];

La segunda sintaxis se utiliza la mayoría de las veces. Puedes agregar elementos iniciales en los corchetes, de esta manera:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; console.log(books[0]); // Html console.log(books[1]); // Css console.log(books[2]); // Javascript

También puedes reemplazar un elemento de la siguiente manera:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; books[2] = 'Php'; // now ["Html", "Css", "Php"] console.log(books);

O puedes agregar uno nuevo al arreglo, así:

Javascript arrays add new element

let books = ["Html", "Css", "Javascript"]; books[3] = 'Php'; // now ["Html", "Css", "Javascript", "Php"] console.log(books); // Html, Css, Javascript, Php

La longitud del arreglo es la cuenta total de los elementos. Aquí tienes un ejemplo:

Javascript arrays length

let books = ["Html", "Css", "Javascript"]; console.log(books.length); // 3

En caso de que vayas a mostrar el arreglo completo, puedes usar console.log, así:

Un arreglo es capaz de almacenar cualquier tipo de elementos:

Javascript arrays multitype

// mix of values let arr = ['Javascript', { sitename: 'W3Docs'}, true, function () { console.log('welcome'); }]; // get the object at index 1 and then show its name console.log(arr[1].sitename); // W3Docs // get the function at index 3 and run it arr[3](); // welcome

Los arreglos pueden verse como un tipo especial de objeto. Una de las similitudes más notables es que los arreglos pueden terminar con una coma.

Por ejemplo:

let books = [
 "Html",
 "Css",
 "Javascript",
];

Métodos

Uno de los usos más extendidos de los arreglos es una cola. En informática, se conoce como una asamblea ordenada de elementos que soportan las dos siguientes operaciones:

push - se utiliza para agregar un elemento al final

shift - se utiliza para obtener un elemento desde el principio, avanzando la cola. En consecuencia, el segundo elemento se convierte en el primero.

Los arreglos soportan ambas de las operaciones mencionadas anteriormente, y es una práctica común para los desarrolladores.

También puedes usar arreglos para otra práctica. Es una estructura de datos llamada pila, que soporta dos operaciones:

push - está destinado a agregar un elemento al final.

pop - está destinado a tomar un elemento desde el final.

En javascript, los arreglos funcionan como una cola y como una pila. Con la ayuda de los arreglos, puedes agregar o eliminar elementos al principio o al final.

Métodos que trabajan con el final de un arreglo

pop

Este método se utiliza para extraer y devolver el último elemento del arreglo. Por ejemplo:

Javascript arrays pop element

let books = ["Html", "Css", "Javascript"]; console.log(books.pop()); // remove "Jasvascript" and alert it console.log(books); // Html, Css

push

Puedes utilizar este método para agregar el elemento al final del arreglo, así:

Javascript arrays push element

let books = ["Html", "Css"]; books.push("Javascript"); console.log(books); // Html, Css, Javascript

Las llamadas libros.push(...) y libros[libros.length] = ... son iguales.

Métodos que trabajan con el comienzo del arreglo

shift

Este método está destinado a extraer y devolver el primer elemento del arreglo.

Por ejemplo:

Javascript arrays shift element

let books = ["Html", "Css", "Javascript"]; console.log(books.shift()); // remove Html and show it console.log(books); // Css, Javascript

unshift

Este se utiliza para agregar el elemento al comienzo del arreglo, como sigue:

Javascript arrays unshift element

let books = ["Css", "Javascript"]; books.unshift('Html'); console.log(books); // Html, Css, Javascript

Con la ayuda de los métodos push y unshift, puedes agregar simultáneamente diferentes elementos.

Vamos a ver este ejemplo:

Javascript arrays push and unshift element

let books = ["Html"]; books.push("Css", "Javascript"); books.unshift("Php", "C#"); // ["Php", "C#", "Html", "Css", "Javascript"] console.log(books);

Internos

Como mencionamos anteriormente, los arreglos son un tipo especial de objeto. Los corchetes se pueden usar para acceder a una propiedad arr[0] provienen de la sintaxis del objeto. Una cosa hace que un arreglo sea aún más especial. Es su representación interna. El motor tiende a almacenar sus elementos consecutivamente en el área de memoria contigua. Pero, ten en cuenta que se romperán si dejas de trabajar con el arreglo en el orden dado y lo tratas como un objeto ordinario.

Por ejemplo, técnicamente es posible actuar así:

let books = []; // make an array 
books[99999] = 5; // assign a property with the index far greater than its length 
books.name = "Javascript"; // create a property with an arbitrary name

Está disponible porque los arreglos son objetos. Tienes la opción de agregarles propiedades.

También deberías conocer los casos de mal uso del arreglo para evitarlos. Aquí tienes varios ejemplos:

Agregar una propiedad no numérica, como arr.test = 9.
Hacer agujeros, como agregar arr[0] y luego arr[500] sin poner nada entre ellos.
Rellenar el arreglo en orden inverso. Por ejemplo, arr[500], arr[499].

Podemos suponer que uno debe tratar los arreglos como estructuras únicas trabajando con ellos con los datos ordenados.

Bucles

Una de las formas comunes de recorrer los elementos del arreglo es el bucle for sobre los índices.

Aquí tienes un ejemplo:

Javascript arrays loop

let arr = ["Html", "Css", "Javascript"]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

Otra forma de bucle es for..of.

El ejemplo se ve así:

Javascript arrays loop

let books = ["Html", "Css", "Javascript"]; // iterates over array elements for (let book of books) { console.log(book); }

Esta forma de bucle no te da acceso al número del elemento actual.

Como los arreglos son objetos, también técnicamente puedes usar for..in:

Javascript arrays loop

let booksArray = ["Html", "Css", "Javascript"]; for (let key in booksArray) { console.log(booksArray[key]); // Html, Css, Javascript }

De todos modos, no es una buena idea, ya que puede causar problemas potenciales, tales como:

El bucle for..in puede iterar sobre todas las propiedades, no solo las propiedades numéricas.
El bucle for..in está optimizado para objetos genéricos pero no para arreglos. Por eso es hasta 10-100 veces más lento.

La Longitud

Cada vez que modificamos el arreglo, la propiedad length se actualiza automáticamente. No es la cantidad de valores en el arreglo, sino el índice numérico + 1. Por ejemplo, un solo elemento con un índice grande dará una gran longitud, así:

Javascript arrays length

let books = []; books[100] = "Html"; console.log(books.length); // 101

De todos modos, los desarrolladores no usan arreglos de esa manera.

La propiedad length es escribible. Cuando la disminuyes, el arreglo se truncará. Vamos a ver este ejemplo:

Javascript arrays length

let arr = [1, 2, 3, 4, 5]; arr.length = 3; // truncate to 3 elements console.log(arr); // [1, 2, 3] arr.length = 5; // return length back console.log(arr[4]); // undefined: the values do not return

Puedes vaciar fácilmente el arreglo usando arr.length = 0;.

Creando un Nuevo Arreglo

Aquí tienes otra sintaxis para crear un arreglo:

let arr = new Array("Html", "Css", "etc");

De todos modos, esta sintaxis no se usa con frecuencia.

En caso de que new Array se llame con un solo argumento, que es un número. Después de eso, crea un arreglo sin elementos, pero con una longitud específica:

Javascript create array

let arr = new Array(3); // will it create an array of [3] console.log(arr[0]); // undefined! no elements. console.log(arr.length); // length 3

En el código mencionado arriba, todos los elementos son undefined .

Arreglos Multidimensionales

Los arreglos pueden tener elementos que son arreglos también. Esto se puede usar para almacenar matrices:

Javascript create array

let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][1]); // 5, the central elementarrays

Método toString

Los arreglos implementan el método toString a su manera. Devuelve una lista de elementos separados por comas. Aquí tienes un ejemplo:

Javascript create array

let arr = [1, 2, 3]; console.log(arr); // 1,2,3 console.log(String(arr) === '1,2,3'); // true

También hay alternativas:

Javascript create array

console.log([] + 1); // "1" console.log([1] + 1); // "11" console.log([2, 1] + 2); // "2,12"

Pero no tienen Symbol.toPrimitive ni valueOf. Los arreglos implementan simplemente la conversión toString. Por lo tanto, aquí [] se transforma en "1" y [2,1] se convierte en "2,1".

Si el binario más "+" agrega algo a una cadena, la cambia a una cadena, por lo que el siguiente paso se ve así:

Javascript create array

console.log("" + 1); // "1" console.log("2" + 1); // "21" console.log("2,2" + 1); // "2,21"

Hora del Cuestionario: ¡Pon a Prueba Tus Habilidades!

¿Listo para desafiar lo que has aprendido? Sumérgete en nuestros cuestionarios interactivos para una comprensión más profunda y una forma divertida de reforzar tu conocimiento.