Introdução

Se você se deparou com o caso de uso de iterar nvárias vezes em JavaScript, é provável que tenha tentado implementar a solução abaixo (especialmente em reagir, quando você precisa renderizar um elemento JSX n várias vezes).

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

Matrizes Esparsas

Quando as matrizes JavaScript são instanciadas sem nenhum elemento, mas apenas com o comprimento, os elementos em todos os índices são preenchidos com empty items.

Esses elementos não são iteráveis ​​com alguns métodos de iteração de array como forEach, map, filter, etc. Esses elementos irão ignorar os elementos vazios e apenas iterar sobre outros elementos não vazios, se houver.

Por exemplo,

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 ]

Itens vazios são tratados como undefinedem algumas operações como for...ofloop, acesso via índice e o ...operador spread.

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

Os métodos acima são úteis quando você precisa iterar um certo número de vezes em uma única instrução, como renderizar um elemento JSX várias vezes no React.

Isso é tudo, pessoal! Obrigado por ler.

Mais conteúdo em PlainEnglish.io . Assine nosso boletim informativo semanal gratuito . Siga-nos no Twitter , LinkedIn , YouTube e Discord . Interessado em Growth Hacking? Conheça o Circuito .