Einführung

Wenn Sie in JavaScript auf den Anwendungsfall der Iteration ngestoßen sind, haben Sie wahrscheinlich versucht, die folgende Lösung zu implementieren (insbesondere in Reaktion, wenn Sie ein JSX-Element n-mal rendern müssen).

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

Sparse-Arrays

Wenn JavaScript-Arrays ohne Elemente, sondern nur mit der Länge instanziiert werden, werden Elemente an allen Indizes mit gefüllt empty items.

Diese Elemente sind mit einigen Array-Iterationsmethoden wie forEach, map, filter, usw. nicht iterierbar. Diese Elemente überspringen die leeren Elemente und iterieren nur über andere nicht leere Elemente, falls vorhanden.

Zum Beispiel,

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 ]

Leere Elemente werden wie undefinedin einigen Operationen wie for...ofLoop, Zugriff über Index und dem Spread- ...Operator behandelt.

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

Die oben genannten Methoden sind praktisch, wenn Sie eine bestimmte Anzahl von Iterationen in einer einzelnen Anweisung ausführen müssen, z. B. beim mehrfachen Rendern eines JSX-Elements in React.

Das war's Leute! Danke fürs Lesen.

Weitere Inhalte auf PlainEnglish.io . Melden Sie sich für unseren kostenlosen wöchentlichen Newsletter an . Folgen Sie uns auf Twitter , LinkedIn , YouTube und Discord . Interessiert an Growth Hacking? Schauen Sie sich die Schaltung an .