3 つの主要な方法とその他のテクニックでマスターする TypeScript オブジェクト配列の反復処理

2024-04-16

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

このチュートリアルでは、TypeScript でオブジェクトの配列を反復処理する方法について説明します。 3 つの主要な方法と、それぞれの利点と欠点について説明します。

for ループは、最も基本的な反復処理方法の一つです。配列の各要素にアクセスするためにインデックスを使用します。

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

for (let i = 0; i < users.length; i++) {
  const user = users[i];
  console.log(user.id, user.name);
}

出力:

1 John Doe
2 Jane Doe
3 Peter Jones

利点:

シンプルで分かりやすい
インデックスを使用して特定の要素にアクセスできる

コードが冗長になる可能性がある
配列の変更時にインデックスを手動で更新する必要がある

for...of ループは、より簡潔な for ループの構文です。配列の各要素に直接アクセスできます。

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

for (const user of users) {
  console.log(user.id, user.name);
}

1 John Doe
2 Jane Doe
3 Peter Jones

for ループよりも簡潔で読みやすい
インデックスを手動で管理する必要がない

for ループほど汎用性がない
インデックスにアクセスできない

forEach メソッドは、配列の各要素に対して関数を呼び出すためのものです。

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

users.forEach(user => {
  console.log(user.id, user.name);
});

1 John Doe
2 Jane Doe
3 Peter Jones

簡潔で読みやすい
for ループよりもコードが少なくなる

ループを途中で break できない

上記以外にも、オブジェクトの配列を反復処理する方法はいくつかあります。例えば、map メソッドや reduce メソッドを使用することができます。

TypeScript でオブジェクトの配列を反復処理するには、いくつかの方法があります。それぞれの方法には、利点と欠点があります。状況に応じて適切な方法を選択することが重要です。

補足

上記の例では、User インターフェースを定義していません。これは、単なる例であるためです。実際のコードでは、独自のインターフェースまたは型を使用する必要があります。
TypeScript は、静的型付け言語であるため、変数に型を割り当てる必要があります。

サンプルコード：オブジェクトの配列を反復処理

for ループ

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

for (let i = 0; i < users.length; i++) {
  const user = users[i];
  console.log(user.id, user.name);
}

1 John Doe
2 Jane Doe
3 Peter Jones

説明:

users 変数は、User インターフェースのタイプの配列です。
for ループは、users 配列の各要素を反復処理します。
ループの各イテレーションで、user 変数は現在の要素に割り当てられます。
console.log ステートメントは、ユーザーの ID と名前を出力します。

for...of ループ

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

for (const user of users) {
  console.log(user.id, user.name);
}

1 John Doe
2 Jane Doe
3 Peter Jones

このコードは、for ループのより簡潔な構文である for...of ループを使用しています。
user 変数は、users 配列の各要素に直接割り当てられます。
他の部分は、for ループの例と同じです。

forEach メソッド

interface User {
  id: number;
  name: string;
}

const users: User[] = [
  { id: 1, name: "John Doe" },
  { id: 2, name: "Jane Doe" },
  { id: 3, name: "Peter Jones" },
];

users.forEach(user => {
  console.log(user.id, user.name);
});

1 John Doe
2 Jane Doe
3 Peter Jones

このコードは、forEach メソッドを使用して、users 配列の各要素に対して関数を呼び出しています。
関数の引数は、現在の要素を表す user 変数です。
関数の内部では、ユーザーの ID と名前を出力します。

map メソッドを使用して、配列の各要素を変換することができます。

const userIds = users.map(user => user.id);
console.log(userIds); // [1, 2, 3]

const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log(totalAge); // 120

これらの例は、TypeScript でオブジェクトの配列を反復処理するためのさまざまな方法を示すほんの一例です。状況に応じて適切な方法を選択することが重要です。

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

Array.prototype.filter メソッド

このメソッドは、条件に一致する要素のみを含む新しい配列を返すために使用できます。

interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  { id: 1, name: "John Doe", age: 30 },
  { id: 2, name: "Jane Doe", age: 25 },
  { id: 3, name: "Peter Jones", age: 40 },
];

const adultUsers = users.filter(user => user.age >= 18);
console.log(adultUsers);

[ { id: 1, name: 'John Doe', age: 30 }, { id: 2, name: 'Jane Doe', age: 25 }, { id: 3, name: 'Peter Jones', age: 40 } ]

このコードは、filter メソッドを使用して、age が 18 歳以上のユーザーのみを含む新しい adultUsers 配列を作成します。
user.age >= 18 条件は、ユーザーが成人かどうかを判断します。
条件が真の場合、ユーザーは adultUsers 配列に追加されます。

interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  { id: 1, name: "John Doe", age: 30 },
  { id: 2, name: "Jane Doe", age: 25 },
  { id: 3, name: "Peter Jones", age: 40 },
];

const firstAdultUser = users.find(user => user.age >= 18);
console.log(firstAdultUser);

{ id: 1, name: 'John Doe', age: 30 }

条件が真の場合、ループは終了し、firstAdultUser 変数にはそのユーザーが割り当てられます。

interface User {
  id: number;
  name: string;
  age: number;
}

const users: User[] = [
  { id: 1, name: "John Doe", age: 30 },
  { id: 2, name: "Jane Doe", age: 25 },
  { id: 3, name: "Peter Jones", age: 40 },
];

const hasAdultUser = users.some(user => user.age >= 18);
console.log(hasAdultUser); // true