Wstęp

Jeśli zetknąłeś się z przypadkiem użycia nwielokrotnego iterowania w JavaScript, być może próbowałeś zaimplementować poniższe rozwiązanie (szczególnie w React, gdy musisz wyrenderować element JSX n razy).

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

Rzadkie tablice

Kiedy tablice JavaScript są tworzone bez żadnych elementów, ale tylko z długością, elementy we wszystkich indeksach są wypełnione empty items.

Tych elementów nie można iterować za pomocą niektórych metod iteracji tablicowych, takich jak forEach, map, filter, itp. Te elementy pomijają puste elementy i po prostu iterują po innych niepustych elementach, jeśli takie istnieją.

Na przykład,

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 ]

Puste elementy są traktowane jak undefinedw niektórych operacjach, takich jak for...ofpętla, dostęp przez indeks i ...operator rozprzestrzeniania.

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

Powyższe metody przydają się, gdy trzeba wykonać określoną liczbę iteracji w pojedynczej instrukcji, na przykład wielokrotnie renderując element JSX w React.

To wszystko ludzie! Dziękuje za przeczytanie.

Więcej treści na PlainEnglish.io . Zapisz się do naszego bezpłatnego cotygodniowego biuletynu . Śledź nas na Twitterze , LinkedIn , YouTube i Discordzie . Zainteresowany Growth Hackingiem? Sprawdź obwód .