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 mutar el array.
Para crear un array, agrega elementos entre corchetes [].
Para leer del array, coloca 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
También se pueden crear arrays con la sintaxis del constructor, pero para la mayoría de los casos 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).
Establecer o acceder a través de valores que no son enteros usando la notación de corchetes (o la notación de punto) no establece ni recupera un elemento de la lista del array en sí, sino que establece o accede 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 separadas, y las operaciones de recorrido y mutación del array no se pueden aplicar a esas 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 los elementos se pueden eliminar con la palabra clave delete.
Sin embargo, esto no cambia la longitud del array y deja un hueco de empty.
En otros lenguajes, esto es similar a un array disperso.
Los huecos empty se omiten al usar operaciones de recorrido o mutació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 debe haber huecos, y si la length debe reflejar la cantidad de elementos que se recorrerán o mutarán, usa splice en su lugar.
El método splice() cambia el contenido de un array al eliminar o reemplazar elementos existentes y/o agregar 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 mutar
La propiedad length de un array está conectada a la lista de elementos que el array contiene.
Se puede mutar.
Cuando la longitud aumenta, se crean huecos empty, que no se tienen en cuenta al recorrer o mutar el array.
Cuando la longitud disminuye, elimina los elementos al 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
Quizás te tiente usar names instanceof Array, y eso puede funcionar, pero no en todas las circunstancias.
Lee este artículo para más información.
Métodos de array
Algunos de los métodos disponibles en todos los objetos Array se pueden usar para agregar o quitar elementos de un array.
Aquí tienes algunos:
push
El método push() agrega 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() agrega 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 al eliminar o reemplazar elementos existentes y/o agregar 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