Heim > Web-Frontend > js-Tutorial > Hauptteil

Erstellen von Arrays in JavaScript: Eine umfassende Anleitung

WBOY
Freigeben: 2024-07-18 18:23:22
Original
913 Leute haben es durchsucht

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 = [];
Nach dem Login kopieren

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

for (let i = 0; i < 5; i++) {
  arr.push(i);
}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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]
Nach dem Login kopieren

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]
Nach dem Login kopieren

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]
Nach dem Login kopieren

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]
Nach dem Login kopieren

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'}]
Nach dem Login kopieren

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'}, {}, {}, {}, {}]
Nach dem Login kopieren

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]
Nach dem Login kopieren

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]]
Nach dem Login kopieren

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!

Quelle:dev.to
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!