Das Erstellen von Arrays in JavaScript ist eine grundlegende Aufgabe, dennoch gibt es einige Nuancen und Fallstricke, die selbst erfahrene Entwickler möglicherweise übersehen. Lassen Sie uns in die Grundlagen eintauchen und einige interessante Aspekte der Array-Erstellung und -Manipulation erkunden, die Sie vielleicht aufschlussreich finden.

Grundlegende Array-Erstellung

Der einfachste Weg, ein Array zu erstellen, ist die Verwendung von Array-Literalen:

let arr = [];

Sie können dieses Array dann mithilfe einer Schleife füllen:

for (let i = 0; i 



Dadurch wird ein Array mit den Elementen [0, 1, 2, 3, 4] erstellt. Wenn Sie jedoch ein leeres Array erstellen, ohne es zu füllen, erhalten Sie ein Array ohne Elemente und ohne leere Slots.


  
  
  Verwendung des Array-Konstruktors


Eine andere Möglichkeit, Arrays zu erstellen, ist die Verwendung des Array-Konstruktors:


let arr = Array(5);




Wenn ein einzelnes numerisches Argument übergeben wird, wird ein dünn besetztes Array mit der angegebenen Länge, aber ohne tatsächliche Elemente erstellt:


console.log(arr.length); // 5
console.log(arr); // [empty × 5]





  
  
  Sparse-Arrays


Sparse-Arrays haben „leere Slots“, was bei der Verwendung von Methoden wie Map, Filter oder forEach zu unerwartetem Verhalten führen kann. Diese Methoden überspringen leere Slots:


let arr = Array(5);
arr = arr.map((x, i) => i); // Still [empty × 5]




Um ein solches Array zu füllen, müssen Sie Werte manuell festlegen:


arr[0] = 2;
arr[4] = 3;
console.log(arr); // [2, empty × 3, 3]





  
  
  Umgang mit Sparse-Arrays


Um spärliche Arrays effektiv zu handhaben, können Sie Methoden wie fill verwenden, um Werte zu initialisieren:


let arr = Array(5).fill(1);
console.log(arr); // [1, 1, 1, 1, 1]




Aber seien Sie vorsichtig beim Füllen mit Objekten oder Arrays:


let arr = Array(5).fill({});
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}, {name: 'John'}]




Jedes Element verweist auf dasselbe Objekt. Um dies zu vermeiden, verwenden Sie map:


let arr = Array(5).fill(0).map(() => ({}));
arr[0].name = 'John';
console.log(arr); // [{name: 'John'}, {}, {}, {}, {}]





  
  
  Array.from-Methode


Array.from bietet eine vielseitige Möglichkeit, Arrays aus arrayähnlichen oder iterierbaren Objekten zu erstellen:


let arr = Array.from({ length: 5 }, (_, i) => i);
console.log(arr); // [0, 1, 2, 3, 4]




Diese Methode kann auch beim Erstellen zweidimensionaler Arrays hilfreich sein:


let arr2D = Array.from({ length: 5 }, () => Array(5).fill(0));
arr2D[0][0] = 1;
console.log(arr2D); // [[1, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0], [0, 0, 0, 0, 0]]





  
  
  Iterieren über Arrays


JavaScript bietet mehrere Möglichkeiten zum Durchlaufen von Arrays, wobei jede mit geringer Dichte Arrays unterschiedlich behandelt:

• for-Schleife: Verarbeitet jeden Index und behandelt leere Slots als undefiniert.
• for...in: Iteriert über Indizes des Arrays und überspringt leere Slots.
• for...of: Iteriert über Werte und behandelt leere Slots als undefiniert.

Abschluss

Wenn Sie die Feinheiten der Array-Erstellung und -Manipulation in JavaScript verstehen, können Sie häufige Fallstricke vermeiden und effizienteren Code schreiben. Ganz gleich, ob Sie Array-Literale, den Array-Konstruktor oder Methoden wie Array.from und fill verwenden: Wenn Sie wissen, wie diese Tools funktionieren, können Sie Arrays in Ihren Projekten effektiv handhaben.

Wenn Sie diesen Leitfaden hilfreich fanden, lassen Sie es mich wissen. Ich bin immer bestrebt, mehr Inhalte zu erstellen, die sich mit den Grundlagen von JavaScript befassen. Vielen Dank fürs Lesen und viel Spaß beim Codieren!