Arrays in JavaScript

Arrays in JavaScript können zunächst verwirrend und schwierig zu verstehen sein, insbesondere wenn es um fortgeschrittene Konzepte geht. Auch ich hatte zunächst Schwierigkeiten, Arrays in JavaScript zu verstehen. In diesem Artikel möchte ich Arrays in JavaScript entmystifizieren und alles aufschlüsseln, was Sie wissen müssen, damit Sie sicher damit arbeiten können.

Definition

Was ist ein Array?

Ein Array ist eine Datenstruktur, die eine Sammlung von Elementen speichert, auf die jeweils über einen Index zugegriffen werden kann. In vielen Programmiersprachen speichern Arrays Elemente an zusammenhängenden Speicherorten. In JavaScript sind Arrays listenartige Objekte auf hoher Ebene, die zum Speichern mehrerer Werte in einer einzelnen Variablen verwendet werden. Sie sind nullindiziert, was bedeutet, dass das erste Element den Index 0 hat.

Arrays in JavaScript

Da JavaScript eine dynamisch typisierte Sprache ist, können Arrays Elemente unterschiedlichen Typs enthalten. Ein Array kann Zahlen, Zeichenfolgen, boolesche Werte, Objekte und sogar andere Arrays enthalten. Dies unterscheidet sich von statisch typisierten Sprachen wie Java oder C, wo Arrays normalerweise homogen sind und Elemente desselben Datentyps enthalten müssen.

Warum ein Array verwenden?

Arrays helfen bei der effizienten Datenverwaltung, indem sie Ihnen das Speichern, Zugreifen und Bearbeiten von Werten ermöglichen. Sie werden für alles verwendet, was Listen oder Sammlungen betrifft, etwa die Verwaltung von Artikeln in einem E-Commerce-Warenkorb oder die Verfolgung von Benutzereingaben.

So erstellen Sie ein Array in JavaScript

Es gibt mehrere Möglichkeiten, Arrays in JavaScript zu erstellen, ich werde einige davon durchgehen:

1. Array-Literale verwenden []

In JavaScript können Sie einfach ein Array erstellen, indem Sie [] einer Variablen oder einer Konstante zuweisen

const numbers = [1, 2, 3];
const fruits = ["Apple", "Banana", "Orange"];

Beachten Sie, dass Elemente eines Arrays durch Komma getrennt sind,

2. Verwenden des Array-Konstruktors

Sie können ein Array auch als Instanz eines nativen JavaScript-Array-Konstruktors erstellen, indem Sie die folgende Syntax verwenden:
const myArray = new Array()
Der Array-Konstruktor akzeptiert ein oder mehrere Argumente (es müssen Zahlen sein) und verhält sich je nach Anzahl der übergebenen Argumente unterschiedlich!
Wenn Sie ein Argument übergeben: const myArray = new Array(4), wird ein neues Array mit 4 leeren Elementen erstellt!

Wenn Sie mehr als ein Argument übergeben: const myArray = new Array(1, 2, 3), erstellt dies ein Array mit 3 Zahlen 1, 2 bzw. 3 und ähnelt dem Schreiben von const myArray = [1, 2 , 3]!

Ich weiß, das sieht verwirrend aus, aber glauben Sie mir, es ist einfach, wenn Sie noch ein paar Übungen damit machen!

3. Verwenden der Array.of-Methode

Arrays können auch mit dieser Methode Array.of erstellt werden. Dabei wird lediglich ein Array erstellt, das alle Elemente enthält, die Sie ihm als Argumente übergeben. Der Unterschied zwischen der Verwendung von Array.of und dem Array-Konstruktor liegt darin, wie sie sich verhalten, wenn sie ein Argument erhalten!

const array1 = Array.of(1); // This returns [1]
const array2 = Array.of(2, true, "hello"); // This returns [2, true, 'hello']

Beachten Sie, wie sich Array.of verhält, wenn es einen Parameter empfängt. Im Gegensatz zum Array-Konstruktor, der nur ein Array aus n leeren Elementen erstellt, erstellt Array.of lediglich ein Array mit einem einzelnen Element, das dem von Ihnen übergebenen entspricht!

4. Verwenden der Array.from-Methode

Sie können auch die Methode Array.from(iterable) verwenden, die ein Argument empfängt, das ebenfalls iterierbar sein muss, und daraus ein Array erstellt! Sie können beispielsweise einen Satz an diese Methode übergeben und aus den Werten dieses Satzes ein Array erstellen!

const mySet = new Set([2, 3, 4, 5, 5]);
const arrayFromSet = Array.from(mySet);

Array-Manipulation in JavaScript

Wir haben gesehen, was ein Array ist und wie Sie Arrays in JavaScript erstellen können. Das verbleibende Problem, das Sie sich jetzt vielleicht fragen, ist: Wie verwende und arbeite ich mit Arrays?
Nun, das ist eine gute Frage!

Traditionelle Art, mit Arrays in JavaScript zu arbeiten

Traditionell verwenden wir Schleifen, um die in einem Array gespeicherten Elemente zu durchlaufen und sie zu verwenden!
Das folgende Beispiel zeigt, wie Sie ein Array von Zahlen durchlaufen und das Doppelte jeder Zahl innerhalb des Arrays anzeigen können:

const numbers = [1, 2, 3, 4];
for (let i = 0; i 

  
  
  Verwendung moderner JavaScript-Array-Methodensyntax


JavaScript verfügt standardmäßig über viele Array-Methoden (Funktionen höherer Ordnung). Sie sind für alle Array-Instanzen über das Array.prototype-Objekt zugänglich. Wir verwenden die von JavaScript bereitgestellten Methoden, um in Arrays gespeicherte Daten zu manipulieren und mit ihnen zu arbeiten! Wir können sogar unsere eigenen Array-Methoden erstellen (wir werden uns das im nächsten Kapitel ansehen)

Es handelt sich um Methoden höherer Ordnung, da sie andere Funktionen als Argumente verwenden und diese Funktionen verwenden, um die in Arrays gespeicherten Daten zu manipulieren!

Diese Array-Methoden werden ebenfalls in zwei Kategorien eingeteilt:


Mutierend: Diese durchlaufen das Array und während sie die Callback-Funktion anwenden, mutieren sie auch das ursprüngliche Array!

Nicht mutierend: Diese durchlaufen das Array und wenden die Rückruffunktion an, aber anstatt das ursprüngliche Array zu mutieren, geben sie ein neues Array zurück

  
  
  1. forEach()-Methode


forEach() ist eine Array-Methode höherer Ordnung, die verwendet wird, um Elemente eines Arrays zu durchlaufen und eine Rückruffunktion auf jedes Element anzuwenden, ohne entweder das ursprüngliche Array zu ändern oder ein neues Array zu erstellen!

Die Syntax der Rückruffunktionen, die normalerweise eine anonyme Funktion ist (normalerweise die gleiche in allen anderen Methoden):

function (currentElement[, index, targetArray]) {}




Das bedeutet, dass die Array-Methode bei jeder Iteration Zugriff auf das aktuelle Element in der Iteration (currentElement), seinen optionalen Index im Array-Index und den Verweis auf das Ziel-Array hat, in dem die Methode ausgeführt wird targetArray, das ebenfalls optional ist. Aber Sie können diese Parameter beliebig nennen, Sie müssen nur auf ihre Positionen achten.


const numbers = [1, 2, 3, 4];
numbers.forEach((element) => {
  console.log(element * 2);
});




  
  
  2. map()-Methode


 Genau wie forEach ist die Karte auch eine andere Möglichkeit, über die Elemente des Arrays zu iterieren und die Rückruffunktion auf jedes Element anzuwenden, aber im Gegensatz zu forEach ist die Karte eine nicht mutierende Methode und erstellt daher als Ergebnis das neue Array und gibt es zurück Iteration und ändert das ursprüngliche Array nicht!

const numbers = [1, 2, 3, 4];
const squaredNumbers = numbers.map((element) => element * 2);
console.log(squaredNumbers);




  
  
  3. filter()-Methode


Die Methode 
filter() wird verwendet, wenn Sie das Array filtern möchten, indem Sie die nicht gewünschten Elemente entfernen. Dies ist eine nicht mutierende Methode und gibt ein neues Array zurück!

Für jede Iteration muss der Rückruf innerhalb von filter() einen booleschen Wert zurückgeben, der angibt, ob das aktuelle Element in das neue gefilterte Array aufgenommen werden soll oder nicht

const numbers = [1, 2, 3, 4];
const evenNumbers = numbers.filter((element) => element % 2 === 0);
console.log(evenNumber); // [2, 4]




  
  
  4. Reduce()-Methode


Die Methode 
reduce() unterscheidet sich ein wenig von den oben genannten. Stellen Sie sich das als eine Möglichkeit vor, alle Elemente in einem Array zu einem einzigen Wert zusammenzufassen, indem Sie nacheinander eine Funktion auf jedes Element anwenden. Es gibt einen einzelnen Wert aus allen Elementen des Arrays zurück. Sie verwenden es, wenn Sie einen einzelnen Wert aus allen Elementen eines Arrays benötigen, z. B. Summe, Durchschnitt, Maximum oder Minimum, um nur einige zu nennen!

Die Syntax ist auch anders

Array.reduce(function(accumulator, element[, index, targetArray]) [, initialValue])

Diese Methode benötigt zwei Argumente, das erste ist wie andere Methoden die Rückruffunktion und das zweite ist der Anfangswert der Akkuvariable. Dieses zweite Argument ist optional. Wenn es nicht angegeben wird, verwendet die Reduzierung das erste Element eines Arrays als Anfangswert von accumulator

Der Akkumulator speichert das von der Callback-Funktion bei jeder Iteration zurückgegebene Ergebnis und ist das Endergebnis, das von der Reduzierung zurückgegeben wird, sobald die Iteration beendet ist!

Versuchen wir, eine Summe aus einer Reihe von Zahlen zu finden:

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, element) => accumulator   element);
console.log(sum);




  
  
  4. Slice()-Methode


slice() ist eine weitere nützliche Array-Methode in JavaScript, die zum Extrahieren eines kleinen Teils eines Arrays verwendet wird! Slice() erstellt ein neues Array, indem es einen Abschnitt eines vorhandenen Arrays kopiert, ohne das ursprüngliche Array zu ändern.

Die Syntax für die Methode „slice()“ lautet wie folgt:

Array.slice(startIndex, endIndex) startIndex stellt einen Startpunkt der Extraktion dar und ist inklusiv. Der endIndex stellt das Endelement der Extraktion dar. Er ist optional und exklusiv. Wenn es nicht bereitgestellt wird, kopieren die Slice-Methoden ein Array von startIndex an das Ende eines Arrays!

const fruits = ["apple", "banana", "orange", "mango"];
const slicedFruits = fruits.slice(1, 3); // ['banana', 'orange']




  
  
  5. splice()-Methode


splice() ist eine Array-Methode in JavaScript, die zum Hinzufügen, Entfernen und Ersetzen von Elementen in einem Array verwendet wird. splice() ändert den Inhalt eines Arrays durch Hinzufügen, Entfernen oder Ersetzen von Elementen im Array.

Die Syntax für die splice()-Methode lautet wie folgt:

Array.splice(index, elementsToRemove, newElement1, newElement2, ..., newElementn)

Das sieht vielleicht verwirrend aus, aber lassen Sie mich versuchen, es zu erklären:

Index bezeichnet den Startindex im Array, in dem das Entfernen des Elements beginnen soll, und ist inklusive.

elementsToRemove stellt die Anzahl der Elemente aus dem Index dar, die Sie aus dem Array entfernen möchten. Wenn Sie nur neue Elemente hinzufügen möchten, können Sie an dieser Position 0 angeben.

newElement1, newElement2 usw. Dies kann eine beliebige Anzahl von Elementen sein, die Sie Ihrem Array hinzufügen möchten, und sie ersetzen elementsToRemove-Elemente, die Sie in Ihrem Array angegeben haben!

Viel geredet, sehen wir uns ein Beispiel an:

const fruits = ["apple", "banana", "orange", "mango"];
// If we want to replace 'banana' with 'pineapple'
const splicedFruits = fruits.splice(1, 1, "pineapple"); // This will return ['apple', 'pineapple', 'orange', 'mango']




fruits.splice(1, 1, „pineapple“) bedeutet, dass aus dem Index von 1 1 Element entfernt und „pineapple“ hinzugefügt wird

Wenn wir dem Array nur Ananas hinzufügen wollten, ohne andere Werte damit zu ersetzen, hätten wir dies schreiben können als

Fruits.splice(1, 0, "pineapple") Dies würde eine Ananas nach dem Element bei Index1 hinzufügen und kein anderes Element aus diesem Array entfernen.


  
  
  Abschluss


Arrays sind eine grundlegende und vielseitige Funktion in JavaScript und bieten eine wesentliche Struktur zum Speichern und Bearbeiten von Datensammlungen. Von der einfachen Array-Erstellung mithilfe von Literalen bis hin zu fortgeschritteneren Methoden wie Array.of() und Array.from() bieten JavaScript-Arrays eine Reihe von Möglichkeiten zur Verarbeitung verschiedener Datentypen. Indem Sie die Array-Manipulation durch Schleifen oder moderne Methoden wie forEach(), map(), filter(), Reduce(), Slice() und Splice() beherrschen, können Sie komplexe Vorgänge effizient ausführen. Das Verständnis dieser Array-Funktionen ist der Schlüssel zu JavaScript-Kenntnissen, damit Sie saubereren, prägnanteren und leistungsfähigeren Code schreiben können.