Heim  >  Artikel  >  Web-Frontend  >  Erstellen von Arrays in JavaScript: Eine umfassende Anleitung

Erstellen von Arrays in JavaScript: Eine umfassende Anleitung

WBOY
WBOYOriginal
2024-07-18 18:23:22980Durchsuche

Creating Arrays in JavaScript: A Comprehensive Guide

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 < 5; i++) {
  arr.push(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, über Arrays zu iterieren, 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. Unabhängig davon, 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 verarbeiten.

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!

Das obige ist der detaillierte Inhalt vonErstellen von Arrays in JavaScript: Eine umfassende Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn