Ein Array in JavaScript ist eine Datenstruktur, die zum Speichern mehrerer Werte in einer einzelnen Variablen verwendet wird. Es kann verschiedene Datentypen speichern und ermöglicht eine dynamische Größenänderung. Der Zugriff auf Elemente erfolgt über ihren Index, beginnend bei 0.

JavaScript-Array

Sie haben zwei Möglichkeiten, JavaScript-Arrays zu erstellen: mit dem Array-Konstruktor oder der Kurzform-Array-Literal-Syntax , was nur aus eckigen Klammern besteht. Arrays haben eine flexible Größe, sodass sie beim Hinzufügen oder Entfernen von Elementen größer oder kleiner werden können.

Inhaltsverzeichnis

• Was ist ein Array in JavaScript?
• Grundlegende Terminologien von JavaScript-Arrays
• Deklaration eines Arrays
• Grundlegende Operationen an JavaScript-Arrays
• Unterschied zwischen JavaScript-Arrays und -Objekten
• Wann werden JavaScript-Arrays und -Objekte verwendet?
• Erkennen eines JavaScript-Arrays
• Vollständige JavaScript-Array-Referenz
• Beispiele für JavaScript-Arrays
• JavaScript-Spickzettel

Grundlegende Terminologien von JavaScript-Arrays

• Array: Eine Datenstruktur in JavaScript, die es Ihnen ermöglicht, mehrere Werte in einer einzigen Variablen zu speichern.
• Array-Element: Jeder Wert innerhalb eines Arrays wird als Element bezeichnet. Der Zugriff auf Elemente erfolgt über ihren Index.
• Array-Index: Eine numerische Darstellung, die die Position eines Elements im Array angibt. JavaScript-Arrays sind nullindiziert, was bedeutet, dass das erste Element den Index 0 hat.
• Array-Länge: Die Anzahl der Elemente in einem Array. Es kann mithilfe der Längeneigenschaft abgerufen werden.

Deklaration eines Arrays

Grundsätzlich gibt es zwei Möglichkeiten, ein Array zu deklarieren: Array-Literal und Array-Konstruktor.

1. Erstellen eines Arrays mit Array-Literal

Das Erstellen eines Arrays mithilfe eines Array-Literals erfordert die Verwendung von eckigen Klammern [], um das Array zu definieren und zu initialisieren. Diese Methode ist prägnant und wird wegen ihrer Einfachheit weithin bevorzugt.

Syntax:

let arrayName = [value1, value2, ...]; 

Beispiel:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); 

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] 

2. Erstellen eines Arrays mit dem Array Constructor (JavaScript neues Schlüsselwort)

Der Array-Konstruktor bezieht sich auf eine Methode zum Erstellen von Arrays durch Aufrufen der Array-Konstruktorfunktion. Dieser Ansatz ermöglicht eine dynamische Initialisierung und kann zum Erstellen von Arrays mit einer bestimmten Länge oder Elementen verwendet werden.

Syntax:

let arrayName = new Array(); 

Beispiel:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr); 

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ] 

Notiz: Beide oben genannten Methoden bewirken genau das Gleiche. Verwenden Sie die Array-Literal-Methode für Effizienz, Lesbarkeit und Geschwindigkeit.

Grundlegende Operationen an JavaScript-Arrays

1. Zugriff auf Elemente eines Arrays

Auf jedes Element im Array kann über die Indexnummer zugegriffen werden. Der Index in den Arrays beginnt bei 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]); 

HTML CSS Javascript React 

2. Zugriff auf das erste Element eines Arrays

Die Array-Indizierung beginnt bei 0, sodass wir über die Indexnummer auf das erste Element des Arrays zugreifen können.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem); 

First Item: HTML 

3. Zugriff auf das letzte Element eines Arrays

Mit der Indexnummer [array.length – 1] können wir auf das letzte Array-Element zugreifen.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem); 

First Item: React 

4. Ändern der Array-Elemente

Elemente in einem Array können geändert werden, indem dem entsprechenden Index ein neuer Wert zugewiesen wird.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses); 

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ] 

5. Elemente zum Array hinzufügen

Mit Methoden wie push() und unshift() können dem Array Elemente hinzugefügt werden.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses); 

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ] 

6. Elemente aus einem Array entfernen

Entfernen Sie Elemente mit Methoden wie pop(), shift() oder splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses); 

Ausgabe

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS 

7. Array-Länge

Ermitteln Sie die Länge eines Arrays mithilfe der Längeneigenschaft.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len); 

Array Length: 5 

8. Erhöhen und verringern Sie die Array-Länge

Wir können die Array-Länge mithilfe der JavaScript-Längeneigenschaft erhöhen und verringern.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses) 

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ] 

9. Durchlaufen von Array-Elementen

Wir können Arrays iterieren und auf Array-Elemente zugreifen, indem wir die for- und forEach-Schleifen verwenden.

Beispiel: Es ist ein Beispiel für eine for-Schleife.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i  < courses.length; i++) {  console.log(courses[i]) } 

HTML CSS JavaScript React 

Beispiel: Es ist das Beispiel von Array.forEach() Schleife.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); }); 

HTML CSS JavaScript React 

10. Array-Verkettung

Kombinieren Sie zwei oder mehr Arrays mit der Methode concat(). Ir gibt ein neues Array zurück, das verbundene Array-Elemente enthält.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray); 

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ] 

11. Konvertierung eines Arrays in einen String

Wir haben eine eingebaute Methode toString() um ein Array in einen String umzuwandeln.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString()); 

HTML,CSS,JavaScript,React 

12. Überprüfen Sie den Typ eines Arrays

Das JavaScript Art der Der Operator wird verwendet, um den Typ eines Arrays zu überprüfen. Es gibt ein Objekt für Arrays zurück.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses); 

object 

Unterschied zwischen JavaScript-Arrays und -Objekten

• JavaScript-Arrays verwenden Indizes als Zahlen.
• Objekte verwenden Indizes als Namen.

Wann werden JavaScript-Arrays und -Objekte verwendet?

• Arrays werden verwendet, wenn Elementnamen numerisch sein sollen.
• Objekte werden verwendet, wenn Elementnamen Zeichenfolgen sein sollen.

Erkennen eines JavaScript-Arrays

Es gibt zwei Methoden, an denen wir ein JavaScript-Array erkennen können:

• Durch die Nutzung Array.isArray() Methode
• Durch die Nutzung Instanz von Methode

Nachfolgend finden Sie ein Beispiel, das beide Ansätze zeigt:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array) 

Using Array.isArray() method: true Using instanceof method: true 

Notiz: Beim Schreiben der Arrays tritt ein häufiger Fehler auf:

const numbers = [5] // and const numbers = new Array(5) 

const numbers = [5] console.log(numbers) 

Die beiden obigen Aussagen sind nicht identisch.

Ausgabe: Diese Anweisung erstellt ein Array mit einem Element [5] .

[5] 

const numbers = new Array(5)  console.log(numbers) 

[ ] 

Vollständige JavaScript-Array-Referenz

Wir haben eine vollständige Liste der Javascript-Arrays. Um diese zu überprüfen, gehen Sie bitte diese durch JavaScript-Array-Referenz Artikel. Es enthält eine detaillierte Beschreibung und Beispiele aller Array-Eigenschaften und -Methoden.

Beispiele für JavaScript-Arrays

Beispiele für JavaScript-Arrays enthalten eine Liste von Fragen, die in Vorstellungsgesprächen am häufigsten gestellt werden. Bitte lesen Sie diesen Artikel Beispiele für JavaScript-Arrays für weitere Einzelheiten.

JavaScript-Spickzettel

Wir haben einen Spickzettel zu Javascript, in dem wir alle wichtigen Themen zu Javascript behandelt haben. Schauen Sie sich diese bitte durch Javascript-Spickzettel – Eine grundlegende Anleitung zu JavaScript .