TypeScript でオブジェクトの配列を反復処理する

1. TypeScript の配列
2. TypeScript で forEach メソッドを使用してオブジェクトの配列を反復処理する
3. TypeScript で for...of ステートメントを使用してオブジェクトの配列を反復処理する
4. TypeScript で for...in ステートメントを使用してオブジェクトの配列を反復処理する
5. TypeScript で for ループを使用してオブジェクトの配列を反復処理する

この記事では、TypeScript でオブジェクトの配列を反復処理する方法について説明します。

TypeScript の配列

TypeScript 配列はユーザー定義です。 文字列や数値など、さまざまなデータ型の値を複数格納できる特殊なデータ型です。

配列は固定サイズのデータ構造です。 要素の配列は、インデックス ベースのストレージに格納されます。

最初の要素はインデックス 0 に格納され、要素が追加されるたびに 1 ずつ増加します。

TypeScript は、次の構文を使用して配列を宣言および初期化します。

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

配列要素へのアクセス

要素の配列は、要素のインデックスを使用して次のようにアクセスできます。

コード例:

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

出力：

Audi
BMW
Toyota
Mercedes

TypeScript で要素の配列を反復処理する方法はいくつかあります。

1. forEach メソッド
2. for ループ
3. for...of ステートメント
4. for...in ステートメント

TypeScript で forEach メソッドを使用してオブジェクトの配列を反復処理する

このメソッドは、TypeScript 配列内の各要素またはオブジェクトに対して関数を実行します。 forEach メソッドは、次のように宣言できます。

構文：

your_array.forEach(callback function);

文字列の配列を宣言しましょう。

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

forEach メソッドを使用して、すべての配列要素を carBrands から別の配列にコピーします。 copyOfCarBrands という空の配列を宣言しましょう。

let copyOfCarBrands: string[] = [];

forEach メソッドを使用して carBrands 配列の各要素を反復処理し、それを新しい copyOfCarBrands 配列にプッシュします。

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

最後に、copyOfCarBrands 配列を印刷しましょう。

console.log(copyOfCarBrands);

出力：

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

forEach メソッドは複数型の配列でも使用できます。 multiValues という複数型の配列を定義して、各項目をコンソールに記録しましょう。

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

出力：

Asia
1000
Europe
340
20

forEach メソッドにはいくつかの欠点があります。

1. このメソッドは、配列でのみ使用できます。
2. ループを断ち切る方法はありません。

TypeScript で for...of ステートメントを使用してオブジェクトの配列を反復処理する

for...of ループ ステートメントは、配列の要素にアクセスしてそれらを返すことができます。 下図のように使用できます。

構文：

for (let variable of givenArray ) {
    statement;
}

各反復で、variable は givenArray の配列要素に割り当てられます。

配列を宣言しましょう。

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

fruits 配列の各要素にアクセスするには、以下で for...of ループを使用できます。

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

出力：

Apple
Grapes
Mangoe
Banana

TypeScript で for...in ステートメントを使用してオブジェクトの配列を反復処理する

for...in ループ構文は、for...of とほとんど同じです。 ただし、各反復で配列要素のインデックスを返します。

このループは、次のように使用できます。

構文：

for (let variable in givenArray ) {
    statement;
}

変数 は、各反復の各要素のインデックスに割り当てられます。 givenArray は反復可能な配列です。

数値の配列を定義しましょう。

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

返されたインデックス値を使用して、numberArr の各要素にアクセスできます。

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

各反復で、variable は numberArr の各要素のインデックスに割り当てられます。 したがって、numberArr[index] で要素の値にアクセスできます。

この場合、各反復で index 値は variable になります。

出力：

100
560
300
20

TypeScript で for ループを使用してオブジェクトの配列を反復処理する

for ループは、配列要素を反復処理する最も一般的な方法です。 以下のように使用できます。

構文：

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

index 値は反復ごとに増加し、条件 index < arraySize が満たされるまでループが続きます。

文字列の配列を作成しましょう。

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

oceanArr の各要素を反復処理して、以下に示すように出力できます。

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

出力：

Atlantic
Indian
Pacific