Introduction

Si vous avez rencontré le cas d'utilisation d'un nnombre d'itérations en JavaScript, il y a de fortes chances que vous ayez essayé d'implémenter la solution ci-dessous (en particulier en réaction, lorsque vous devez restituer un élément JSX n nombre de fois).

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

Tableaux clairsemés

Lorsque les tableaux JavaScript sont instanciés sans aucun élément mais uniquement avec la longueur, les éléments de tous les indices sont remplis avec empty items.

Ces éléments ne sont pas itérables avec certaines méthodes d'itération de tableau telles que forEach, map, filter, etc. Ces éléments ignoreront les éléments vides et se contenteront d'itérer sur d'autres éléments non vides, le cas échéant.

Par exemple,

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 ]

Les éléments vides sont traités comme undefineddans certaines opérations comme la for...ofboucle, l'accès via l'index et l' ...opérateur de propagation.

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

Les méthodes ci-dessus sont utiles lorsque vous devez itérer un certain nombre de fois dans une seule instruction, comme le rendu d'un élément JSX plusieurs fois dans React.

C'est tout ! Merci d'avoir lu.

Plus de contenu sur PlainEnglish.io . Inscrivez-vous à notre newsletter hebdomadaire gratuite . Suivez-nous sur Twitter , LinkedIn , YouTube et Discord . Intéressé par le Growth Hacking ? Découvrez Circuit .