Introducción

Si se ha encontrado con el caso de uso de iterar un nnúmero de veces en JavaScript, lo más probable es que haya intentado implementar la solución a continuación (especialmente en reaccionar, cuando necesita representar un elemento JSX n número de veces).

Array(5).map(() => console.log("hello"))

Matrices dispersas

Cuando se crean instancias de matrices de JavaScript sin ningún elemento pero solo con la longitud, los elementos en todos los índices se rellenan con empty items.

Estos elementos no son iterables con algunos métodos de iteración de matriz como forEach, map, filter, etc. Estos elementos omitirán los elementos vacíos y simplemente iterarán sobre otros elementos no vacíos, si los hay.

Por ejemplo,

const arr = Array(5);

console.log(arr); // [ <5 empty items> ]

arr[1] = 1;
arr[3] = 3;
arr[5] = 5;

console.log(arr); // [ <1 empty item>, 1, <1 empty item>, 3, <1 empty item>, 5 ]

arr.forEach((ele) => console.log(ele)); // 1, 3, 5

const arr = [1, 2, 3];

arr.length = 5;

console.log(arr); // [ 1, 2, 3, <2 empty items> ]

arr[7] = 8;

console.log(arr); // [ 1, 2, 3, <4 empty items>, 8 ]

arr.forEach((ele) => console.log(ele)); // 1, 2, 3, 8

delete arr[1];

console.log(arr); // [ 1, <1 empty item>, 3, <4 empty items>, 8 ]

const newArr = [1, , 2, , 3];

console.log(newArr); // [ 1, <1 empty item>, 2, <1 empty item>, 3 ]

Los elementos vacíos se tratan como undefineden algunas operaciones como for...ofbucle, acceso a través de índice y el ...operador de propagación.

const arr = [1, , 2, , 3];

for (const ele of arr) { // 1, undefined, 2, undefined, 3, undefined
  console.log(ele);
}

console.log(...arr); // 1, undefined, 2, undefined, 3, undefined

console.log(arr[0]); // 1
console.log(arr[1]); // undefined

[...Array(3)].map((e) => console.log(e)); // undefined, undefined, undefined

Array.from({ length: 3 }).map((e) => console.log(e)); // undefined, undefined, undefined

Los métodos anteriores son útiles cuando necesita iterar una cierta cantidad de veces en una sola declaración, como representar un elemento JSX varias veces en React.

¡Eso es todo amigos! Gracias por leer.

Más contenido en PlainEnglish.io . Regístrese para recibir nuestro boletín semanal gratuito . Síganos en Twitter , LinkedIn , YouTube y Discord . ¿Interesado en el Growth Hacking? Visita Circuito .