introduzione

Se ti sei imbattuto nel caso d'uso di iterare il nnumero di volte in JavaScript, è probabile che tu abbia provato a implementare la soluzione di seguito (specialmente in reazione, quando devi eseguire il rendering di un elemento JSX n numero di volte).

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

Array sparsi

Quando gli array JavaScript vengono istanziati senza alcun elemento ma solo con la lunghezza, gli elementi in tutti gli indici vengono riempiti con empty items.

Questi elementi non sono iterabili con alcuni metodi di iterazione dell'array come forEach, map, filter, ecc. Questi elementi salteranno gli elementi vuoti e itereranno semplicemente su altri elementi non vuoti, se presenti.

Per esempio,

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 ]

Gli elementi vuoti vengono trattati come undefinedin alcune operazioni come il ciclo, l'accesso tramite indice e l' operatore for...ofdi diffusione ....

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

I metodi di cui sopra sono utili quando devi iterare per un certo numero di volte in una singola istruzione, come il rendering di un elemento JSX più volte in React.

È tutto gente! Grazie per aver letto.

Altri contenuti su PlainEnglish.io . Iscriviti alla nostra newsletter settimanale gratuita . Seguici su Twitter , LinkedIn , YouTube e Discord . Interessato al Growth Hacking? Scopri Circuito .