Arrays
Los objetos permiten almacenar colecciones de datos mediante nombres, lo cual es útil en muchos casos. Sin embargo, cuando necesitamos una colección ordenada, como una lista de usuarios, productos o elementos HTML, los objetos no son ideales porque no manejan bien el orden de los elementos.
Para esto, utilizamos los arrays, también conocidos como arreglos, matrices o vectores.
Declaración
Podemos crear un array vacío de dos formas:
let arr = new Array();
let arr = [];
La segunda forma es la más común. Podemos inicializar el array con elementos:
Otra ventaja de los backticks es que permiten extender una cadena en múltiples líneas:
let fruits = ["Apple", "Orange", "Plum"];
Los elementos del array están numerados desde cero. Podemos acceder a un elemento específico utilizando su índice:
let fruits = ["Apple", "Orange", "Plum"];
alert(fruits[0]); // Apple
alert(fruits[1]); // Orange
alert(fruits[2]); // Plum
Podemos reemplazar un elemento:
fruits[2] = 'Pear'; // ahora ["Apple", "Orange", "Pear"]
O agregar uno nuevo al final del array:
fruits[3] = 'Lemon'; // ahora ["Apple", "Orange", "Pear", "Lemon"]
La propiedad length
nos da la cantidad total de elementos en el array:
let fruits = ["Apple", "Orange", "Plum"];
alert(fruits.length); // 3
Podemos mostrar todo el array:
let fruits = ["Apple", "Orange", "Plum"];
alert(fruits); // Apple,Orange,Plum
Un array puede contener elementos de cualquier tipo:
let arr = ['Apple', { name: 'John' }, true, function() { alert('hello'); }];
alert(arr[1].name); // John
arr[3](); // hello
Coma final
Un array puede tener una coma al final para facilitar la adición o eliminación de elementos:
let fruits = [
"Apple",
"Orange",
"Plum",
];
Obtener los últimos elementos con at
Podemos obtener el último elemento de un array usando at(-1)
:
let fruits = ["Apple", "Orange", "Plum"];
alert(fruits.at(-1)); // Plum
Métodos pop
y push
, shift
y unshift
Estos métodos permiten agregar o quitar elementos del array.
pop
elimina y devuelve el último elemento:
let fruits = ["Apple", "Orange", "Pear"];
alert(fruits.pop()); // Pear
alert(fruits); // Apple, Orange
push
agrega un elemento al final:
let fruits = ["Apple", "Orange"];
fruits.push("Pear");
alert(fruits); // Apple, Orange, Pear
shift
elimina y devuelve el primer elemento:
let fruits = ["Apple", "Orange", "Pear"];
alert(fruits.shift()); // Apple
alert(fruits); // Orange, Pear
unshift
agrega un elemento al principio:
let fruits = ["Orange", "Pear"];
fruits.unshift('Apple');
alert(fruits); // Apple, Orange, Pear
Arrays como pilas o colas
Los arrays en JavaScript pueden funcionar como pilas (LIFO) o colas (FIFO). push
y pop
operan en el final del array, mientras que shift
y unshift
operan en el principio.
Rendimiento
Los métodos push
y pop
son más rápidos que shift
y unshift
porque no necesitan mover elementos.
Bucles
Podemos iterar sobre un array con un bucle for
tradicional o con for..of
:
let arr = ["Apple", "Orange", "Pear"];
for (let i = 0; i < arr.length; i++) {
alert(arr[i]);
}
for (let fruit of arr) {
alert(fruit);
}
Propiedad length
La propiedad length
se ajusta automáticamente. Podemos truncar un array ajustando length
:
let arr = [1, 2, 3, 4, 5];
arr.length = 2; // [1, 2]
Arrays multidimensionales
Podemos crear arrays dentro de arrays para representar estructuras más complejas, como matrices:
let matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
alert(matrix[1][1]); // 5
toString
El método toString
de un array devuelve una cadena de sus elementos separados por comas:
let arr = [1, 2, 3];
alert(arr); // 1,2,3
Comparación de arrays
No compares arrays con ==
. Siempre son diferentes a menos que sean el mismo objeto:
alert([] == []); // falso
alert([0] == [0]); // falso
Para comparar arrays, compara elemento por elemento.
Resumen
Los arrays son útiles para almacenar colecciones ordenadas. Pueden ser manipulados con métodos como push
, pop
, shift
y unshift
. Iteramos sobre ellos con bucles for
o for..of
. Evita usar for..in
y la comparación ==
con arrays.