Acerca de Arrays
En JavaScript, un array es una estructura similar a una lista, sin longitud fija, que puede contener cualquier tipo de primitivos u objetos, incluso tipos mezclados.
Incluye la propiedad length y también muchos métodos útiles para recorrer y modificar el array.
Para crear un array, añade elementos entre corchetes ([]).
Para leer del array, escribe el índice entre corchetes ([]) después del identificador. Los índices de un array empiezan en cero.
Por ejemplo:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names[1];
// => Laura
Los arrays también se pueden crear con la sintaxis de constructor, pero para la mayoría de los usos se recomienda la sintaxis de literal de array.
const names = new Array();
names.push('Jack', 'Laura', 'Paul', 'Megan');
names[1];
// => Laura
Los arrays no pueden usar strings como índices de elementos, sino que deben usar números enteros (number).
Si estableces o accedes mediante valores no enteros con la notación de corchetes (o la notación de punto), no establecerás ni recuperarás un elemento de la propia lista de elementos del array, sino que establecerás o accederás a una variable asociada a la colección de propiedades del objeto de ese array.
Las propiedades del objeto del array y la lista de elementos del array son cosas distintas, y las operaciones de recorrido y modificación del array no se pueden aplicar a estas propiedades con nombre.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length;
// => 4
// Properties can be set on arrays using bracket ['property'] or
// dot .property notation, and this will affect the length, as
// shown below.
names.magician = 'Elyse';
names.length;
// => 4
// The property shows up when logging the array, making it seem
// that the property is somehow incorporated in the array.
names;
// => ["Jack", "Laura", "Paul", "Megan", magician: "Elyse"]
// However, be aware. Properties added via non-numeric keys are
// NOT part of the array's internal list, and are not traversed
// or mutated when using one of the traversal or mutation
// operations.
names.forEach((name) => console.log(name));
// => Jack
// => Laura
// => Paul
// => Megan
Eliminar elementos de un array
Los arrays en JavaScript son objects normales, y se pueden eliminar elementos con la palabra clave delete.
Sin embargo, esto no cambia la longitud del array y deja un hueco de empty.
En otros lenguajes, esto se parece a un array disperso.
Los huecos de empty se omiten al usar operaciones de recorrido o modificación.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
delete names[1];
names;
// => ["Jack", empty, "Paul", "Megan"]
names.length;
// => 4
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
Si no quieres que haya huecos y quieres que la length refleje el número de elementos que se recorrerán o modificarán, usa splice en su lugar.
El método splice() cambia el contenido de un array eliminando o reemplazando elementos existentes o añadiendo nuevos elementos en su lugar.
Por ejemplo:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(1, 1);
names;
// => ["Jack", "Paul", "Megan"]
names.length;
// => 3
names.forEach((name) => console.log(name));
// => Jack
// => Paul
// => Megan
La longitud de un array se puede modificar
La propiedad length de un array está ligada a la lista de elementos que contiene el array.
Se puede modificar.
Cuando se aumenta la longitud, se crean huecos de empty que no se tienen en cuenta al recorrer o modificar el array.
Cuando se reduce la longitud, se eliminan los elementos del final del array.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.length = 6;
names;
// => ["Jack", "Laura", "Paul", "Megan", empty × 2]
names.length = 2;
// => ["Jack", "Laura"]
Comprobar si algo es un array
Como los arrays son objects, typeof names devuelve "object".
Para comprobar si algo es un array, usa Array.isArray:
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
typeof names;
// => "object"
Array.isArray(names);
// => true
const object = {};
Array.isArray(object);
// => false
Es posible que te tiente usar names instanceof Array, y eso puede funcionar, pero no en todas las circunstancias.
Lee este artículo para obtener más información.
Métodos de array
Algunos de los métodos disponibles en todos los objetos Array se pueden usar para añadir o eliminar elementos del array.
Aquí tienes unos cuantos:
push
El método push() añade uno o más elementos al final de un array y devuelve la nueva longitud del array.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.push('Jill'); // => 5
names;
// => ['Jack', 'Laura', 'Paul', 'Megan', 'Jill']
pop
El método pop() elimina el último elemento de un array y devuelve ese elemento.
Este método cambia la longitud del array.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.pop(); // => 'Megan'
names;
// => ['Jack', 'Laura', 'Paul']
shift
El método shift() elimina el primer elemento de un array y devuelve ese elemento eliminado.
Este método cambia la longitud del array.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.shift(); // => 'Jack'
names;
// => ['Laura', 'Paul', 'Megan']
unshift
El método unshift() añade uno o más elementos al principio de un array y devuelve la nueva longitud del array.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.unshift('Jill'); // => 5
names;
// => ['Jill', 'Jack', 'Laura', 'Paul', 'Megan']
splice
El método splice() cambia el contenido de un array eliminando o reemplazando elementos existentes o añadiendo nuevos elementos en su lugar.
Este método devuelve un array que contiene los elementos eliminados.
const names = ['Jack', 'Laura', 'Paul', 'Megan'];
names.splice(2, 1, 'Jill'); // => ['Paul']
names;
// => ['Jack', 'Laura', 'Jill', 'Megan']
49 ejercicios
Aprende Arrays