Colecciones indexadas

El objeto Array

Un array es una lista ordenada de valores a los que te refieres con un nombre y un ndice.

Por ejemplo, considera un arreglo llamado emp, que contiene los nombres de los empleados indexados por su id de empleado numrico. De tal modo que emp[0] sera el empleado nmero cero, emp[1] el empleado nmero uno, y as sucesivamente.

JavaScript no tiene un tipo de dato array explcito. Sin embargo, puedes utilizar el objeto Array predefinido y sus mtodos para trabajar con arreglos en tus aplicaciones. El objeto Array tiene mtodos para manipular arreglos de varias formas, tal como unirlos, invertirlos y ordenarlos. Tiene una propiedad para determinar la longitud del arreglo y otras propiedades para usar con expresiones regulares.

Crear un arreglo

Las siguientes declaraciones crean arreglos equivalentes:

let arr = new Array(element0, element1, ..., elementN)
let arr = Array(element0, element1, ..., elementN)
let arr = [element0, element1, ..., elementN]

element0, element1, ..., elementN es una lista de valores para los elementos del arreglo. Cuando se especifican estos valores, el arreglo se inicia con ellos como elementos del arreglo. La propiedad length del arreglo se establece en el nmero de argumentos.

La sintaxis de corchetes se denomina "arreglo literal" o "iniciador de arreglo". Es ms corto que otras formas de creacin de arreglos, por lo que generalmente se prefiere. Consulta Arreglos literales para obtener ms detalles.

Para crear un arreglo con una longitud distinta de cero, pero sin ningn elemento, se puede utilizar cualquiera de las siguientes:

// Esta...
let arr = new Array(arrayLength);

// ...da como resultado el mismo arreglo que este
let arr = Array(arrayLength);

// Esto tiene exactamente el mismo efecto
let arr = [];
arr.length = arrayLength;

Adems de una variable recin definida como se muestra arriba, los arreglos tambin se pueden asignar como una propiedad a un objeto nuevo o existente:

let obj = {}
// ...
obj.prop = [element0, element1, ..., elementN]

// O
let obj = {prop: [element0, element1, ...., elementN]}

Si deseas iniciar un arreglo con un solo elemento, y el elemento resulta ser un Nmero, debes usar la sintaxis de corchetes. Cuando se pasa un solo valor Number al constructor o funcin Array(), se interpreta como un arrayLength, no como un solo elemento.

let arr = [42]; // Crea un arreglo con un solo elemento:
// el nmero 42.

let arr = Array(42); // Crea un arreglo sin elementos
// y arr.length establecidos en 42.
//
// Esto es equivalente a:
let arr = [];
arr.length = 42;

Llamar a Array(N) da como resultado un RangeError, si N no es un nmero entero cuya porcin fraccionaria no es cero. El siguiente ejemplo ilustra este comportamiento.

let arr = Array(9.3); // RangeError: Longitud de arreglo no vlida

Si tu cdigo necesita crear arreglos con elementos nicos de un tipo de dato arbitrario, es ms seguro utilizar arreglos literales. Alternativamente, crea un arreglo vaco primero antes de agregarle el nico elemento.

En ES2015, puedes utilizar el mtodo esttico Array.of para crear arreglos con un solo elemento.

let wisenArray = Array.of(9.3); // wisenArray contiene solo un elemento 9.3

Refirindose a elementos del arreglo

Dado que los elementos tambin son propiedades, puedes acceder a ellos usando la propiedad accessors. Supongamos que defines el siguiente arreglo:

let myArray = ["Wind", "Rain", "Fire"];

Puedes referirte al primer elemento del arreglo como myArray[0], al segundo elemento del arreglo como myArray[1], etc El ndice de los elementos comienza en cero.

let arr = ["one", "two", "three"];
arr[2]; // three
arr["length"]; // 3

Llenar un arreglo

Puedes llenar un arreglo asignando valores a sus elementos. Por ejemplo:

let emp = [];
emp[0] = "Casey Jones";
emp[1] = "Phil Lesh";
emp[2] = "August West";

let arr = [];
arr[3.4] = "Oranges";
console.log(arr.length); // 0
console.log(arr.hasOwnProperty(3.4)); // true

Tambin puedes rellenar un arreglo cuando lo creas:

let myArray = new Array("Hello", myVar, 3.14159);
// OR
let myArray = ["Mango", "Apple", "Orange"];

Entendiendo length

A nivel de implementacin, los arreglos de JavaScript almacenan sus elementos como propiedades de objeto estndar, utilizando el ndice del arreglo como nombre de propiedad.

La propiedad length es especial. Siempre devuelve el ndice del ltimo elemento ms uno. (En el siguiente ejemplo, 'Dusty' est indexado en 30, por lo que cats.length devuelve 30 + 1).

Recuerda, los ndices del Array JavaScript estn basados en 0: comienzan en 0, no en 1. Esto significa que la propiedad length ser uno ms que el ndice ms alto almacenado en el arreglo:

let cats = [];
cats[30] = ["Dusty"];
console.log(cats.length); // 31

Tambin puedes asignar la propiedad length.

Escribir un valor que sea ms corto que el nmero de elementos almacenados trunca el arreglo. Escribir 0 lo vaca por completo:

let cats = ["Dusty", "Misty", "Twiggy"];
console.log(cats.length); // 3

cats.length = 2;
console.log(cats); // logs "Dusty, Misty" - Twiggy se ha eliminado

cats.length = 0;
console.log(cats); // logs []; el arreglo cats est vaco

cats.length = 3;
console.log(cats); // logs [ <3 elementos vacos> ]

Iterando sobre arreglos

Una operacin comn es iterar sobre los valores de un arreglo, procesando cada uno de alguna manera. La forma ms sencilla de hacerlo es la siguiente:

let colors = ["red", "green", "blue"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

Si sabes que ninguno de los elementos de tu arreglo se evala como false en un contexto booleano, si tu arreglo consta solo de nodos DOM, por ejemplo, puedes usar un lenguaje eficiente:

let divs = document.getElementsByTagName("div");
for (let i = 0, div; (div = divs[i]); i++) {
  /* Procesar div de alguna manera */
}

Esto evita la sobrecarga de verificar la longitud del arreglo y garantiza que la variable div se reasigne al elemento actual cada vez que se realiza el bucle para mayor comodidad.

El mtodo forEach() proporciona otra forma de iterar sobre un arreglo:

let colors = ["red", "green", "blue"];
colors.forEach(function (color) {
  console.log(color);
});
// red
// green
// blue

Alternativamente, puedes acortar el cdigo para el parmetro forEach con las funciones de flecha ES2015:

let colors = ["red", "green", "blue"];
colors.forEach((color) => console.log(color));
// red
// green
// blue

La funcin pasada a forEach se ejecuta una vez por cada elemento del arreglo, con el elemento de arreglo pasado como argumento de la funcin. Los valores no asignados no se iteran en un bucle forEach.

Ten en cuenta que los elementos de un arreglo que se omiten cuando se define el arreglo no se enumeran cuando lo itera forEach, pero se enumeran cuando undefined se ha asignado manualmente al elemento:

let array = ["first", "second", , "fourth"];

array.forEach(function (element) {
  console.log(element);
});
// first
// second
// fourth

if (array[2] === undefined) {
  console.log("array[2] is undefined"); // true
}

array = ["first", "second", undefined, "fourth"];

array.forEach(function (element) {
  console.log(element);
});
// first
// second
// undefined
// fourth

Dado que los elementos de JavaScript se guardan como propiedades de objeto estndar, no es recomendable iterar a travs de arreglos de JavaScript usando bucles for...in, porque se enumerarn los elementos normales y todas las propiedades enumerables.

Mtodos de array

El objeto Array tiene los siguientes mtodos:

concat() une dos o ms arreglos y devuelve un nuevo arreglo.

let myArray = new Array("1", "2", "3");
myArray = myArray.concat("a", "b", "c");
// myArray is now ["1", "2", "3", "a", "b", "c"]

join(delimiter = ',') une todos los elementos de un arreglo en una cadena.

let myArray = new Array("Viento", "Lluvia", "Fuego");
let list = myArray.join("-"); // la lista es "Viento - Lluvia - Fuego"

push() agrega uno o ms elementos al final de un arreglo y devuelve la longitud resultante del arreglo.

let myArray = new Array("1", "2");
myArray.push("3"); // myArray ahora es ["1", "2", "3"]

pop() elimina el ltimo elemento de un arreglo y devuelve ese elemento.

let myArray = new Array("1", "2", "3");
let last = myArray.pop();
// myArray ahora es ["1", "2"], last = "3"

shift() elimina el primer elemento de un arreglo y devuelve ese elemento.

let myArray = new Array("1", "2", "3");
let first = myArray.shift();
// myArray ahora es ["2", "3"], first es "1"

unshift() agrega uno o ms elementos al frente de un arreglo y devuelve la nueva longitud del arreglo.

let myArray = new Array("1", "2", "3");
myArray.unshift("4", "5");
// myArray se convierte en ["4", "5", "1", "2", "3"]

slice(start_index, upto_index) extrae una seccin de un arreglo y devuelve un nuevo arreglo.

let myArray = new Array("a", "b", "c", "d", "e");
myArray = myArray.slice(1, 4); // comienza en el ndice 1 y extrae todos los elementos
// hasta el ndice 3, devuelve ["b", "c", "d"]

splice(index, count_to_remove, addElement1, addElement2, ...) elimina elementos de un arreglo y (opcionalmente) los reemplaza. Devuelve los elementos que se eliminaron del arreglo.

let myArray = new Array("1", "2", "3", "4", "5");
myArray.splice(1, 3, "a", "b", "c", "d");
// myArray ahora es ["1", "a", "b", "c", "d", "5"]
// Este cdigo comenz en el ndice uno (o donde estaba el "2"),
// elimin 3 elementos all, y luego insert todos los consecutivos
// elementos en su lugar.

reverse() transpone los elementos de un arreglo, en su lugar: el primer elemento del arreglo se convierte en el ltimo y el ltimo en el primero. Devuelve una referencia al arreglo.

let myArray = new Array("1", "2", "3");
myArray.reverse();
// transpone el arreglo para que myArray = ["3", "2", "1"]

sort() ordena los elementos de un arreglo en su lugar y devuelve una referencia al arreglo.

let myArray = new Array("Viento", "Lluvia", "Fuego");
myArray.sort();
// ordena el arreglo para que myArray = ["Fuego", "Lluvia", "Viento"]

sort() tambin puede tomar una funcin retrollamada para determinar cmo se comparan los elementos del arreglo.

El mtodo sort (y otros a continuacin) que reciben una retrollamada se conocen como mtodos iterativos, porque iteran sobre todo el arreglo de alguna manera. Cada uno toma un segundo argumento opcional llamado thisObject. Si se proporciona, thisObject se convierte en el valor de la palabra clave this dentro del cuerpo de la funcin retrollamada. Si no se proporciona, como en otros casos en los que se invoca una funcin fuera de un contexto de objeto explcito, this se referir al objeto global (window) cuando se usa la funcin de flecha como retrollamada, o undefined cuando se usa una funcin normal como retrollamada.

La funcin retrollamada se invoca con dos argumentos, que son elementos del arreglo.

La siguiente funcin compara dos valores y devuelve uno de tres valores:

Por ejemplo, lo siguiente se ordenar por la ltima letra de una cadena:

let sortFn = function (a, b) {
  if (a[a.length - 1] < b[b.length - 1]) return -1;
  if (a[a.length - 1] > b[b.length - 1]) return 1;
  if (a[a.length - 1] == b[b.length - 1]) return 0;
};
myArray.sort(sortFn);
// ordena el arreglo para que myArray = ["Viento", "Fuego", "Lluvia"]

• si a es menor que b por el sistema de clasificacin, devuelve -1 ( o cualquier nmero negativo)
• si a es mayor que b por el sistema de clasificacin, devuelve 1 (o cualquier nmero positivo)
• si a y b se consideran equivalentes, devuelve 0.

indexOf (searchElement[, fromIndex]) busca en el arreglo searchElement y devuelve el ndice de la primera coincidencia.

let a = ["a", "b", "a", "b", "a"];
console.log(a.indexOf("b")); // registros 1

// Ahora intntalo de nuevo, comenzando despus de la ltima coincidencia
console.log(a.indexOf("b", 2)); // registra 3
console.log(a.indexOf("z")); // logs -1, porque no se encontr 'z'

lastIndexOf(searchElement [, fromIndex]) funciona como indexOf, pero comienza al final y busca hacia atrs.

let a = ["a", "b", "c", "d", "a", "b"];
console.log(a.lastIndexOf("b")); // registra 5

// Ahora intntalo de nuevo, comenzando desde antes de la ltima coincidencia
console.log(a.lastIndexOf("b", 4)); // registra 1
console.log(a.lastIndexOf("z")); // registra -1

forEach(callback[, thisObject]) ejecuta callback en cada elemento del arreglo y devuelve undefined.

let a = ["a", "b", "c"];
a.forEach(function (elemento) {
  console.log(elemento);
});
// registra cada elemento por turno

map(callback [, thisObject]) devuelve un nuevo arreglo del valor de retorno de ejecutar callback en cada elemento del arreglo.

let a1 = ["a", "b", "c"];
let a2 = a1.map(function (item) {
  return item.toUpperCase();
});
console.log(a2); // registra ['A', 'B', 'C']

filter(callback [, thisObject]) devuelve un nuevo arreglo que contiene los elementos para los cuales callback devolvi true.

let a1 = ["a", 10, "b", 20, "c", 30];
let a2 = a1.filter(function (item) {
  return typeof item === "number";
});
console.log(a2); // registra [10, 20, 30]

every(callback [, thisObject]) devuelve true si callback devuelve true para cada elemento del arreglo.

function isNumber(value) {
  return typeof value === "number";
}
let a1 = [1, 2, 3];
console.log(a1.every(isNumber)); // registra true
let a2 = [1, "2", 3];
console.log(a2.every(isNumber)); // registra false

some(callback[, thisObject]) devuelve true si callback devuelve true para al menos un elemento del arreglo.

function isNumber(value) {
  return typeof value === "number";
}
let a1 = [1, 2, 3];
console.log(a1.some(isNumber)); // registra true
let a2 = [1, "2", 3];
console.log(a2.some(isNumber)); // registra true
let a3 = ["1", "2", "3"];
console.log(a3.some(isNumber)); // registra false

reduce(callback[, initialValue]) aplica callback(acumulador, currentValue[, currentIndex[,array]]) para cada valor en el arreglo con el fin de reducir la lista de elementos a un solo valor. La funcin reduce devuelve el valor final devuelto por la funcin callback.

Si se especifica initialValue, entonces callback se llama con initialValue como primer valor de parmetro y el valor del primer elemento del arreglo como segundo valor de parmetro.

Si initialValue no es especificado, entonces callback los primeros dos valores de parmetro debern ser el primer y segundo elemento del arreglo. En cada llamada subsiguiente, el valor del primer parmetro ser el valor de callback devuelto en la llamada anterior, y el valor del segundo parmetro ser el siguiente valor en el arreglo.

Si callback necesita acceso al ndice del elemento que se est procesando, al acceder al arreglo completo, estn disponibles como parmetros opcionales.

let a = [10, 20, 30];
let total = a.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(total); // Imprime 60

reduceRight(callback[, initialValue]) funciona como reduce(), pero comienza con el ltimo elemento.

reduce y reduceRight son los menos obvios de los mtodos de arreglo iterativos. Se deben utilizar para algoritmos que combinan dos valores de forma recursiva para reducir una secuencia a un solo valor.

Arreglos multidimensionales

Los arreglos se pueden anidar, lo cual significa que un arreglo puede contener otro arreglo como elemento. Usando esta caracterstica de los arreglos de JavaScript, se pueden crear arreglos multidimensionales.

El siguiente cdigo crea un arreglo bidimensional.

let a = new Array(4);
for (let i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (let j = 0; j < 4; j++) {
    a[i][j] = "[" + i + ", " + j + "]";
  }
}

Este ejemplo crea un arreglo con las siguientes filas:

Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

Usar arreglos para almacenar otras propiedades

Los arreglos tambin se pueden utilizar como objetos para almacenar informacin relacionada.

const arr = [1, 2, 3];
arr.property = "value";
console.log(arr.property); // Registra "value"

Arreglos y expresiones regulares

Cuando un arreglo es el resultado de una coincidencia entre una expresin regular y una cadena, el arreglo devuelve propiedades y elementos que proporcionan informacin sobre la coincidencia. Un arreglo es el valor de retorno de RegExp.exec(), String.match() y String.split(). Para obtener informacin sobre el uso de arreglos con expresiones regulares, consulta Expresiones regulares.

Trabajar con objetos tipo array

Algunos objetos JavaScript, como NodeList devueltos por document.getElementsByTagName() o un objeto arguments disponible dentro del cuerpo de una funcin, se ven y se comportan como arreglos en la superficie pero no comparten todos sus mtodos. El objeto arguments proporciona un atributo length pero no implementa el mtodo forEach(), por ejemplo.

Los mtodos de arreglo no se pueden llamar directamente en objetos similares a un arreglo.

function printArguments() {
  arguments.forEach(function (item) {
    // TypeError: arguments.forEach no es una funcin
    console.log(item);
  });
}

Pero puedes llamarlos indirectamente usando Function.prototype.call().

function printArguments() {
  Array.prototype.forEach.call(arguments, function (item) {
    console.log(item);
  });
}

Los mtodos de prototipos de arreglos tambin se pueden utilizar en cadenas, ya que proporcionan acceso secuencial a sus caracteres de forma similar a los arreglos:

Array.prototype.forEach.call("a string", function (chr) {
  console.log(chr);
});

Arrays tipados

Los arreglos tipados en JavaScript son objetos similares a arreglos y proporcionan un mecanismo para acceder a datos binarios sin procesar. Como ya sabes, los objetos Array crecen y se encogen dinmicamente y pueden tener cualquier valor de JavaScript. Los motores de JavaScript realizan optimizaciones para que estos arreglos sean rpidos. Sin embargo, a medida que las aplicaciones web se vuelven cada vez ms poderosas, agregando caractersticas como manipulacin de audio y video, acceso a datos sin procesar usando WebSockets, y as sucesivamente, ha quedado claro que hay momentos en los que sera til para que el cdigo JavaScript pueda manipular rpida y fcilmente datos binarios sin procesar en arreglos tipados.

Bferes y vistas: arquitectura de los arreglos con tipo

Para lograr la mxima flexibilidad y eficiencia, los arreglos de JavaScript dividen la implementacin en bferes y vistas. Un bfer (implementado por el objeto ArrayBuffer es un objeto que representa una porcin de datos; no tiene un formato del que hablar y no ofrece ningn mecanismo para acceder a su contenido. Para acceder a la memoria contenida en un bfer, necesitas usar una vista. Una vista proporciona un contexto , es decir, un tipo de datos, un desplazamiento inicial y un nmero de elementos, que convierte los datos en un arreglo con tipo real.

[Arreglos tipados en un <code>ArrayBuffer</code>]

ArrayBuffer

ArrayBuffer es un tipo de dato que se utiliza para representar un bfer de datos binarios genrico de longitud fija. No puedes manipular directamente el contenido de un ArrayBuffer; en su lugar, creas una vista de arreglo con tipo o un DataView que representa el bfer en un formato especfico, y lo usa para leer y escribir el contenido del bfer.

Vistas de arreglos tipados

Las vistas de arreglos tipados tienen nombres autodescriptivos y proporcionan vistas para todos los tipos numricos habituales como Int8, Uint32, Float64 y as sucesivamente. Hay una vista de arreglo con tipo especial, {jsxref("Uint8ClampedArray")}}, que fija los valores entre 0 y 255. Esto es til para procesamiento de datos de Canvas, por ejemplo.

Para obtener ms informacin, consulta Arreglos tipados en JavaScript y la documentacin de referencia para los diferentes objetos TypedArray.

• Anterior
• Siguiente