Array

Descripcin

Los arrays son objetos similares a una lista cuyo prototipo proporciona mtodos para efectuar operaciones de recorrido y de mutacin. Tanto la longitud como el tipo de los elementos de un array son variables. Dado que la longitud de un array puede cambiar en cualquier momento, y los datos se pueden almacenar en ubicaciones no contiguas, no hay garanta de que los arrays de JavaScript sean densos; esto depende de cmo el programador elija usarlos. En general estas caractersticas son cmodas, pero si, en su caso particular, no resultan deseables, puede considerar el uso de arrays con tipo.

Operaciones habituales

Crear un Array

let frutas = ["Manzana", "Banana"];

console.log(frutas.length);
// 2

Acceder a un elemento de Array mediante su ndice

let primero = frutas[0];
// Manzana

let ultimo = frutas[frutas.length - 1];
// Banana

Recorrer un Array

frutas.forEach(function (elemento, indice, array) {
  console.log(elemento, indice);
});
// Manzana 0
// Banana 1

Aadir un elemento al final de un Array

let nuevaLongitud = frutas.push("Naranja"); // Aade "Naranja" al final
// ["Manzana", "Banana", "Naranja"]

Eliminar el ltimo elemento de un Array

let ultimo = frutas.pop(); // Elimina "Naranja" del final
// ["Manzana", "Banana"]

Aadir un elemento al principio de un Array

let nuevaLongitud = frutas.unshift("Fresa"); // Aade "Fresa" al inicio
// ["Fresa" ,"Manzana", "Banana"]

Eliminar el primer elemento de un Array

let primero = frutas.shift(); // Elimina "Fresa" del inicio
// ["Manzana", "Banana"]

Encontrar el ndice de un elemento del Array

frutas.push("Fresa");
// ["Manzana", "Banana", "Fresa"]

let pos = frutas.indexOf("Banana"); // (pos) es la posicin para abreviar
// 1

Eliminar un nico elemento mediante su posicin

Ejemplo:

Eliminamos "Banana" del array pasndole dos parmetros: la posicin del primer elemento que se elimina y el nmero de elementos que queremos eliminar. De esta forma, .splice(pos, 1) empieza en la posicin que nos indica el valor de la variable pos y elimina 1 elemento. En este caso, como pos vale 1, elimina un elemento comenzando en la posicin 1 del array, es decir "Banana".

let elementoEliminado = frutas.splice(pos, 1);
// ["Manzana", "Fresa"]

Eliminar varios elementos a partir de una posicin

Nota:

Con .splice() no solo se puede eliminar elementos del array, si no que tambin podemos extraerlos guardndolo en un nuevo array. Ojo! que al hacer esto estaramos modificando el array de origen.

let vegetales = ["Repollo", "Nabo", "Rbano", "Zanahoria"];
console.log(vegetales);
// ["Repollo", "Nabo", "Rbano", "Zanahoria"]

let pos = 1,
  numElementos = 2;

let elementosEliminados = vegetales.splice(pos, numElementos);
// ["Nabo", "Rbano"] ==> Lo que se ha guardado en "elementosEliminados"

console.log(vegetales);
// ["Repollo", "Zanahoria"] ==> Lo que actualmente tiene "vegetales"

Copiar un Array

let copiaArray = vegetales.slice();
// ["Repollo", "Zanahoria"]; ==> Copiado en "copiaArray"

Acceso a elementos de un array

Los ndices de los arrays de JavaScript comienzan en cero, es decir, el ndice del primer elemento de un array es 0, y el del ltimo elemento es igual al valor de la propiedad length del array restndole 1.

Si se utiliza un nmero de ndice no vlido, se obtendr undefined.

let arr = [
  "este es el primer elemento",
  "este es el segundo elemento",
  "este es el ltimo elemento",
];
console.log(arr[0]); // escribe en consola 'este es el primer elemento'
console.log(arr[1]); // escribe en consola 'este es el segundo elemento'
console.log(arr[arr.length - 1]); // escribe en consola 'este es el ltimo elemento'

Los elementos de un array pueden considerarse propiedades del objeto tanto como toString (sin embargo, para ser precisos, toString() es un mtodo). Sin embargo, se obtendr un error de sintaxis si se intenta acceder a un elemento de un array de la forma siguiente, ya que el nombre de la propiedad no sera vlido:

console.log(arr.0) // error de sintaxis

No hay nada especial ni en los arrays de JavaScript ni en sus propiedades que ocasione esto. En JavaScript, las propiedades cuyo nombre comienza con un dgito no pueden referenciarse con la notacin punto y debe accederse a ellas mediante la notacin corchete.

Por ejemplo, dado un objeto con una propiedad de nombre '3d', slo podra accederse a dicha propiedad con la notacin corchete.

let decadas = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
console.log(decadas.0)  // error de sintaxis
console.log(decadas[0]) // funciona correctamente

renderizador.3d.usarTextura(modelo, 'personaje.png')
renderizador['3d'].usarTextura(modelo, 'personaje.png')

Obsrvese que, en el ltimo ejemplo, ha sido necesario poner '3d' entre comillas. Es posible usar tambin comillas con los ndices del los arrays de JavaScript (p. ej., decadas['2'] en vez de decadas[2]), aunque no es necesario.

El motor de JavaScript transforma en un string el 2 de decadas[2] a travs de una conversin implcita mediante toString. Por tanto, '2' y '02' haran referencia a dos posiciones diferentes en el objeto decadas, y el siguiente ejemplo podra dar true como resultado:

console.log(decadas["2"] != decadas["02"]);

Relacin entre length y las propiedades numricas

La propiedad length de un array de JavaScript est conectada con algunas otras de sus propiedades numricas.

Varios de los mtodos propios de un array (p. ej., join(), slice(), indexOf(), etc.) tienen en cuenta el valor de la propiedad length de un array cuando se les llama.

Otros mtodos (p. ej., push(), splice(), etc.) modifican la propiedad length de un array.

const frutas = [];
frutas.push("banana", "manzana", "pera");

console.log(frutas.length); // 3

Cuando se le da a una propiedad de un array JavaScript un valor que corresponda a un ndice vlido para el array pero que se encuentre fuera de sus lmites, el motor actualizar el valor de la propiedad length como corresponda:

frutas[5] = "fresa";
console.log(frutas[5]); // 'fresa'
console.log(Object.keys(frutas)); // ['0', '1', '2', '5']
console.log(frutas.length); // 6

Si se aumenta el valor de length:

frutas.length = 10;
console.log(frutas); // ['banana', 'manzana', 'pera', <2 empty items>, 'fresa', <4 empty items>]
console.log(Object.keys(frutas)); // ['0', '1', '2', '5']
console.log(frutas.length); // 10
console.log(frutas[8]); // undefined

Si se disminuye el valor de la propiedad length pueden eliminarse elementos:

frutas.length = 2;
console.log(Object.keys(frutas)); // ['0', '1']
console.log(frutas.length); // 2

Hay ms informacin sobre este tema en la pgina sobre Array.length.

Creacin de un array a partir de una expresin regular

El resultado de una bsqueda con una RegExp en un string puede crear un array de JavaScript. Este array tendr propiedades y elementos que proporcionan informacin sobre la correspondencia encontrada. Para obtener un array de esta forma puede utilizarse RegExp.exec(), String.match() o String.replace().

El siguiente ejemplo, y la tabla que le sigue, pueden ayudar a comprender mejor las propiedades y elementos a los que nos referimos:

// Buscar una d seguida de una o ms b y, al final, de otra d
// Recordar las b y la d final
// No distinguir maysculas y minsculas

const miRe = /d(b+)(d)/i;
const miArray = miRe.exec("cdbBdbsbz");

Las propiedades y elementos que se obtienen de esta bsqueda son los siguientes:

Constructor

Array()

Crea un nuevo objeto Array.

Propiedades estticas

get Array[@@species]

La funcin del constructor se utiliza para crear objetos derivados.

Mtodos estticos

Array.from()

Crea una nueva instancia de Array a partir de similarAUnArray, un objeto iterable o parecido a un array.

Array.isArray()

Devuelve true si valor es un array, y false en caso contrario.

Array.of()

Crea una nueva instancia de Array con un nmero variable de parmetros, independientemente del nmero y del tipo de dichos parmetros.

Propiedades de instancia

Array.prototype.length

Indica el nmero de elementos de un array.

Array.prototype[@@unscopables]

Smbolo que contiene todos los nombres de las propiedades que se excluyen de un mbito de enlace with.

Mtodos de instancia

Array.prototype.concat()

Devuelve un nuevo array que es la concatenacin de aqul sobre el que se invoca, seguido de otros array(s) o valor(es).

Array.prototype.copyWithin()

Copia una secuencia de elementos de un array dentro del propio array.

Array.prototype.entries()

Devuelve un nuevo objeto Array Iterator que contiene los pares clave/valor para cada ndice del array.

Array.prototype.every()

Devuelve true si todos los elementos del array cumplen el predicado que recibe como parmetro.

Array.prototype.fill()

Asigna un valor esttico a todos los elementos del array entre las posiciones inicio y fin.

Array.prototype.filter()

Devuelve un nuevo array que contiene todos los elementos de aqul para el cual se llama que cumplan el predicado que se le pasa como parmetro.

Array.prototype.find()

Devuelve el primer elemento del array que cumpla el predicado que se pasa como parmetro, o undefined si ninguno lo cumple.

Array.prototype.findIndex()

Devuelve el ndice del primer elemento del array que cumpla el predicado que se pasa como parmetro, o -1 si nunguno lo cumple.

Array.prototype.forEach()

Llama a la funcin pasada como parmetro para todos los elementos del array.

Array.prototype.includes()

Determina si el array contiene el valorBuscado y devuelve true o false segn sea el caso.

Array.prototype.indexOf()

Devuelve el ndice del primer elemento del array que sea igual a elementoBuscado, o -1 si no existe.

Array.prototype.join()

Concatena en un string todos los elementos de un array.

Array.prototype.keys()

Devuelve un nuevo Array Iterator que contiene las claves de cada ndice del array.

Array.prototype.lastIndexOf()

Devuelve el ndice del ltimo elemento del array que sea igual a elementoBuscado, o -1 si no existe.

Array.prototype.map()

Devuelve un nuevo array que contiene el resultado de llamar a la funcin pasada como parmetro a todos los elementos del array sobre el que se invoca.

Array.prototype.pop()

Elimina el ltimo elemento de un array, y devuelve dicho elemento.

Array.prototype.push()

Aade uno o ms elementos al final de un array y devuelve el nuevo valor de su propiedad length.

Array.prototype.reduce()

Aplica la funcin pasada como parmetro a un acumulador y a cada valor del array, que se recorre de izquierda a derecha, para reducirlo a un nico valor.

Array.prototype.reduceRight()

Aplica la funcin pasada como parmetro a un acumulador y a cada valor del array, que se recorre de derecha a izquierda, para reducirlo a un nico valor.

Array.prototype.reverse()

Invierte el orden de los elementos de un array (el primero pasa a ser el ltimo y el ltimo a ser el primero) en el propio array. Este mtodo modifica el array.

Array.prototype.shift()

Elimina el primer elemento de un array, y devuelve dicho elemento.

Array.prototype.slice()

Extrae una porcin del array sobre el que se llama y devuelve un nuevo array.

Array.prototype.some()

Devuelve true si al menos un elemento del array cumple con el predicado que se pasa como parmetro.

Array.prototype.sort()

Ordena los elementos de un array, modificando ste, y devuelve el array ordenado.

Array.prototype.splice()

Aade, borra o modifica elementos de un array.

Array.prototype.toLocaleString()

Devuelve un string adaptado a la configuracin regional que representa el array y sus elementos. Redefine el mtodo Object.prototype.toLocaleString().

Array.prototype.toString()

Devuelve un string que representa el array y sus elementos. Redefine el mtodo Object.prototype.toString().

Array.prototype.unshift()

Aada uno o ms elementos al inicio de un array y devuelve el nuevo valor de length para el array resultante.

Array.prototype.values()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada ndice del array.

Array.prototype[@@iterator]()

Devuelve un nuevo objeto Array Iterator que contiene los valores para cada ndice del array.

Ejemplos

Creacin de una matriz unidimensional

El siguiente ejemplo crea un array mensajes con una longitud de 0, y luego asigna valores a mensajes[0] y a mensajes[99], con lo que la longitud del array pasa a ser 100.

let mensajes = [];
mensajes[0] = "Hola";
mensajes[99] = "mundo";

if (mensajes.length === 100) {
  console.log("La longitud es de 100.");
}

Creacin de una matriz de dos dimensiones

El siguiente ejemplo crea una matriz bidimensional que representa un tablero de ajedrez. El primer movimiento se realiza copiando la 'p' de tablero[6][4] en tablero[4][4]. La posicin [6][4] se limpia.

let tablero = [
  ["T", "C", "A", "D", "R", "A", "C", "T"],
  ["P", "P", "P", "P", "P", "P", "P", "P"],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  [" ", " ", " ", " ", " ", " ", " ", " "],
  ["p", "p", "p", "p", "p", "p", "p", "p"],
  ["t", "c", "a", "d", "r", "a", "c", "t"],
];

console.log(tablero.join("\n") + "\n\n");

// Adelantar dos posiciones el pen de rey
tablero[4][4] = tablero[6][4];
tablero[6][4] = " ";
console.log(tablero.join("\n"));

Este es el resultado:

T,C,A,D,R,A,C,T
P,P,P,P,P,P,P,P
  , , , , , , ,
  , , , , , , ,
  , , , , , , ,
  , , , , , , ,
p,p,p,p,p,p,p,p
t,c,a,d,r,a,c,t

P,P,P,P,P,P,P,P
  , , , , , , ,
  , , , , , , ,
  , , , ,p, , ,
  , , , , , , ,
p,p,p,p, ,p,p,p
t,c,a,d,r,a,c,t

Uso de un array para tabular un conjunto de valores

valores = [];
for (let x = 0; x < 10; x++) {
  valores.push([2 ** x, 2 * x ** 2]);
}
console.table(valores);

da como resultado:

0  1  0
1  2  2
2  4  8
3  8  18
4  16  32
5  32  50
6  64  72
7  128  98
8  256  128
9  512  162

(La primera columna es el ndice).

Especificaciones

Compatibilidad con navegadores

Ver tambin

• En la Gua de JavaScript:

  • "Propiedades indexadas de un objeto"
  • "Colecciones con ndice: objeto Array"

• Arrays tipados