JavaScript
Explica cómo crear arrays con literales, Array.of, Array.from y Array.fromAsync, acceder con índices o at y entender el comportamiento de length.
Los arrays pueden crearse desde valores escritos directamente, otras colecciones, objetos similares a arrays o secuencias síncronas y asíncronas.
La forma elegida cambia cómo se interpreta la entrada.
const literal = [10, 20, 30];
const fromIterable = Array.from(new Set([10, 20, 30]));La forma habitual es el literal.
const products = ["Keyboard", "Mouse"];
const empty = [];Es clara y no tiene comportamientos sorpresa con un único número.
const values = new Array(1, 2, 3);
// [1, 2, 3]Con un único número entero, significa longitud, no un elemento.
const values = new Array(3);
values.length; // 3
values[0]; // undefinedEl array contiene tres posiciones vacías, conocidas como holes. No equivale exactamente a [undefined, undefined, undefined].
Por claridad, utiliza normalmente literales o Array.from.
Array.of siempre interpreta sus argumentos como elementos.
Array.of(3); // [3]
Array.of(1, 2, 3); // [1, 2, 3]Es útil cuando el número de argumentos es dinámico y no quieres la regla especial del constructor.
Convierte un iterable o un objeto array-like en un array nuevo.
Array.from("JS");
// ["J", "S"]Array.from(new Set([1, 2, 2, 3]));
// [1, 2, 3]También acepta una función de transformación.
Array.from(
{ length: 4 },
(_, index) => index + 1,
);
// [1, 2, 3, 4]Esto evita el problema de new Array(4).map(...), porque map omite holes.
Un objeto array-like tiene length y propiedades numéricas, pero no necesita implementar el protocolo iterable.
const arrayLike = {
0: "A",
1: "B",
length: 2,
};
Array.from(arrayLike); // ["A", "B"]No todos los array-like tienen métodos de array.
arrayLike.map; // undefinedArray.fromAsync construye un array a partir de un iterable asíncrono, un iterable síncrono o una fuente similar a array cuyos valores pueden requerir espera.
const values = await Array.fromAsync(
asyncSource,
);También puede transformar durante la lectura.
const ids = await Array.fromAsync(
asyncSource,
(item) => item.id,
);Forma parte del estándar ECMAScript 2026. Verifica que el runtime objetivo la implemente antes de depender de ella o usa una alternativa compatible cuando sea necesario.
const values = [10, 20, 30];
values[0]; // 10
values[2]; // 30
values[5]; // undefinedLeer una posición inexistente devuelve undefined.
Eso no permite distinguir por sí solo entre:
undefined.const values = [undefined];
values[0]; // undefined
values[1]; // undefinedPara comprobar existencia propia:
Object.hasOwn(values, 0); // true
Object.hasOwn(values, 1); // falseconst values = [10, 20, 30];
values.at(0); // 10
values.at(-1); // 30
values.at(-2); // 20at permite índices negativos desde el final.
values.at(-10); // undefinedconst values = [10, 20, 30];
values.length; // 3length no cuenta manualmente cuántos valores definidos existen. En general representa una posición por encima del índice numérico más alto.
const values = [];
values[5] = "A";
values.length; // 6Las posiciones 0 a 4 quedan vacías.
Reducirla elimina posiciones.
const values = [1, 2, 3, 4];
values.length = 2;
values; // [1, 2]Aumentarla crea holes.
values.length = 5;
values.length; // 5
Object.hasOwn(values, 3); // falseModificar length directamente puede ocultar intención. Métodos como slice, splice, push o una nueva copia suelen comunicar mejor la operación.
Las propiedades que afectan length usan nombres de índice dentro del rango admitido por arrays.
const values = [];
values[0] = "A";
values[1.5] = "B";
values[-1] = "C";1.5 y -1 son propiedades normales; no aumentan length como posiciones del array.
values.length; // 1Evita calcularlo varias veces de forma confusa.
const last = values.at(-1);Antes de at:
const last = values[values.length - 1];Ambas devuelven undefined para un array vacío.
const matrix = [[1, 2], [3, 4]];
matrix[1]?.[0]; // 3
matrix[5]?.[0]; // undefinedOptional chaining evita intentar leer una posición sobre undefined.
JavaScript no tiene una sintaxis nativa de rango para arrays.
const range = Array.from(
{ length: 5 },
(_, index) => index,
);
// [0, 1, 2, 3, 4]Para secuencias grandes o potencialmente infinitas, un iterador o generador puede evitar construir todos los valores de una vez.
function normalizeCollection(value) {
if (value == null) {
return [];
}
if (Array.isArray(value)) {
return [...value];
}
return Array.from(value);
}La función produce un array propio a partir de una colección compatible.
new Array(3) esperando [3].new Array(3).map(...) esperando tres llamadas.undefined y asumir que la posición existe.length sin considerar que elimina o crea holes.length cuenta únicamente elementos definidos.Array.fromAsync sin comprobar el runtime objetivo.new Array(number) crea una longitud con holes.Array.of(number) crea un elemento.Array.from convierte iterables y array-like.Array.fromAsync consume fuentes asíncronas y pertenece a ECMAScript 2026.at acepta índices negativos.undefined.length está relacionada con los índices, no con la cantidad de valores definidos.length elimina elementos.¿Qué diferencias existen entre estos arrays?
const first = new Array(3);
const second = [undefined, undefined, undefined];Ambos tienen length igual a 3, pero first tiene tres holes y second tiene tres propiedades existentes con valor undefined. Object.hasOwn(first, 0) es false; en second es true.
Destructuring y spread en arrays explica cómo extraer posiciones, reunir el resto y crear nuevas colecciones a partir de iterables.