Iterieren Sie über ein Array von Objekten in TypeScript

1. Arrays in TypeScript
2. Iterieren Sie über ein Array von Objekten mit der forEach-Methode in TypeScript
3. Iterieren Sie über ein Array von Objekten mit der for...of-Anweisung in TypeScript
4. Iterieren Sie über ein Array von Objekten mit der for...in-Anweisung in TypeScript
5. Iterieren Sie über ein Array von Objekten mit der for-Schleife in TypeScript

In diesem Artikel wird erläutert, wie wir in TypeScript über ein Array von Objekten iterieren können.

Arrays in TypeScript

TypeScript-Arrays sind benutzerdefiniert. Es ist ein spezieller Datentyp, der mehrere Werte verschiedener Datentypen wie Zeichenfolgen, Zahlen usw. speichern kann.

Ein Array ist eine Datenstruktur mit fester Größe. Das Array von Elementen wird in einem indexbasierten Speicher gespeichert.

Das erste Element wird bei Index 0 gespeichert und für jedes hinzugefügte Element um eins erhöht.

TypeScript verwendet die folgende Syntax, um ein Array zu deklarieren und zu initialisieren.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

Greifen Sie auf Array-Elemente zu

Auf das Array von Elementen kann wie unten über den Index eines Elements zugegriffen werden.

Beispielcode:

console.log(carBrands[0]);
console.log(carBrands[1]);
console.log(carBrands[2]);
console.log(carBrands[3]);

Ausgang:

Audi
BMW
Toyota
Mercedes

Es gibt mehrere Möglichkeiten, ein Array von Elementen in TypeScript zu durchlaufen.

1. Die forEach-Methode
2. Die for-Schleife
3. Die for...of-Anweisung
4. Die for...in-Anweisung

Iterieren Sie über ein Array von Objekten mit der forEach-Methode in TypeScript

Diese Methode führt eine Funktion für jedes Element oder Objekt im TypeScript-Array aus. Die Methode forEach kann wie folgt deklariert werden.

Syntax:

your_array.forEach(callback function);

Lassen Sie uns ein Array von Strings deklarieren.

let carBrands: string[] = ["Audi", "BMW", "Toyota", "Mercedes"];

Wir werden alle Array-Elemente von carBrands mit der Methode forEach in ein anderes Array kopieren. Deklarieren wir ein leeres Array namens copyOfCarBrands.

let copyOfCarBrands: string[] = [];

Lassen Sie uns die Methode forEach verwenden, um über jedes Element im Array carBrands zu iterieren und es in das neue Array copyOfCarBrands zu verschieben.

carBrands.forEach(function(brand){
    copyOfCarBrands.push(brand);
});

Lassen Sie uns zum Schluss das Array copyOfCarBrands drucken.

console.log(copyOfCarBrands);

Ausgang:

[ 'Audi', 'BMW', 'Toyota', 'Mercedes' ]

Wir können die forEach-Methode auch mit Multi-Type-Arrays verwenden. Lassen Sie uns ein Array mit mehreren Typen namens multiValues definieren und jedes Element in der Konsole protokollieren.

let multiValues: (string | number)[] = ['Asia', 1000, 'Europe', 340, 20];
multiValues.forEach(function(value){
    console.log(value);
});

Ausgang:

Asia
1000
Europe
340
20

Die forEach-Methode hat einige Nachteile.

1. Diese Methode kann nur mit Arrays verwendet werden.
2. Es gibt keine Möglichkeit, die Schleife zu unterbrechen.

Iterieren Sie über ein Array von Objekten mit der for...of-Anweisung in TypeScript

Die Schleifenanweisung for...of kann auf Elemente eines Arrays zugreifen und diese zurückgeben. Es kann wie unten gezeigt verwendet werden.

Syntax:

for (let variable of givenArray ) {
    statement;
}

In jeder Iteration wird variable einem Array-Element von givenArray zugewiesen.

Lassen Sie uns ein Array deklarieren.

let fruits: string[] = ["Apple", "Grapes", "Mangoe", "Banana"];

Die for...of-Schleife kann unten verwendet werden, um auf jedes Element im fruits-Array zuzugreifen.

for (let fruitElement of fruits) {
  console.log(fruitElement);
}

Ausgang:

Apple
Grapes
Mangoe
Banana

Iterieren Sie über ein Array von Objekten mit der for...in-Anweisung in TypeScript

Die Syntax der for...in-Schleife ähnelt fast der von for...of. Aber es gibt den Index der Array-Elemente in jeder Iteration zurück.

Diese Schleife kann wie im Folgenden gezeigt verwendet werden.

Syntax:

for (let variable in givenArray ) {
    statement;
}

Die variable wird in jeder Iteration dem Index jedes Elements zugewiesen. givenArray ist das iterierbare Array.

Lassen Sie uns ein Array von Zahlen definieren.

let numberArr: number[] = [100,560,300,20];

Wir können den zurückgegebenen Indexwert verwenden, um auf jedes Element von numberArr zuzugreifen.

for (let variable in numberArr ) {
    console.log(numberArr[variable]);
}

In jeder Iteration wird die variable dem Index jedes Elements in numberArr zugewiesen. Daher können wir mit numberArr[index] auf den Elementwert zugreifen.

In diesem Fall wäre der index-Wert in jeder Iteration variabel.

Ausgang:

100
560
300
20

Iterieren Sie über ein Array von Objekten mit der for-Schleife in TypeScript

Die for-Schleife ist die gebräuchlichste Art, über Array-Elemente zu iterieren. Es kann wie folgt verwendet werden.

Syntax:

for (let index; index<arraySize; index++) {
    statement;
}

Der index-Wert wird bei jeder Iteration erhöht und die Schleife wird fortgesetzt, bis die Bedingung index < arraySize erfüllt ist.

Lassen Sie uns ein Array von Strings erstellen.

let oceanArr: string[] = ['Atlantic', 'Indian', 'Pacific'];

Wir können jedes Element in oceanArr durchlaufen und wie unten gezeigt drucken.

for (let index=0; index<oceanArr.length; index++) {
    console.log(oceanArr[index]);
}

Ausgang:

Atlantic
Indian
Pacific