TypeScript for...of インデックス・キー

TypeScriptでfor...ofとインデックス/キーを扱う

for...ofは、配列やイテラブルオブジェクトの要素を順にループする便利な構文です。TypeScriptでは、インデックスやキーを取得しながらループすることもできます。

配列の場合

const numbers: number[] = [1, 2, 3];

for (const [index, value] of numbers.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
}

この例では、numbers.entries()によってインデックスと値のタプルを生成し、for...ofで順に取得しています。

オブジェクトの場合

const person: { name: string; age: number } = { name: "John", age: 30 };

for (const [key, value] of Object.entries(person)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

オブジェクトの場合、Object.entries()を使用してキーと値のタプルを取得します。

• タプルをデストラクタリングして、インデックスやキーと値を個別に扱うことができる。
• entries()メソッドを使用して、インデックスやキーと値のタプルを取得できる。
• for...ofは配列やイテラブルオブジェクトの要素をループする。

const numbers: number[] = [1, 2, 3];

// インデックスと値を取得
for (const [index, value] of numbers.entries()) {
  console.log(`Index: ${index}, Value: ${value}`);
}

// 偶数のみを抽出
const evenNumbers: number[] = [];
for (const [index, value] of numbers.entries()) {
  if (value % 2 === 0) {
    evenNumbers.push(value);
  }
}
console.log(evenNumbers);

const person: { name: string; age: number } = { name: "John", age: 30 };

// キーと値を取得
for (const [key, value] of Object.entries(person)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

// オブジェクトの値を更新
for (const [key, value] of Object.entries(person)) {
  person[key] = value.toUpperCase();
}
console.log(person);

• これらの例では、インデックスやキーを使用して、配列やオブジェクトの要素を処理したり、新しい配列やオブジェクトを作成したりしている。

forループ

const numbers: number[] = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  console.log(`Index: ${i}, Value: ${numbers[i]}`);
}

• 欠点
  配列の要素数を知っている必要がある。
• 利点
  インデックスを直接操作できる。

forEachメソッド

const numbers: number[] = [1, 2, 3];

numbers.forEach((value, index) => {
  console.log(`Index: ${index}, Value: ${value}`);
});

• 欠点
  breakやcontinueを使用できない。
• 利点
  配列の要素数を知っている必要がなく、簡潔な書き方ができる。

for...inループ（オブジェクトの場合）

const person: { name: string; age: number } = { name: "John", age: 30 };

for (const key in person) {
  console.log(`Key: ${key}, Value: ${person[key]}`);
}

• 欠点
  プロトタイプチェーンの継承されたプロパティもループされる。
• 利点
  オブジェクトのキーをループできる。

Object.keysとforループ（オブジェクトの場合）

const person: { name: string; age: number } = { name: "John", age: 30 };

for (const key of Object.keys(person)) {
  console.log(`Key: ${key}, Value: ${person[key]}`);
}

• 欠点
  少し冗長になる。

適切な方法の選択

• 簡潔な書き方が必要な場合
  forEachメソッドが適している。
• インデックスが必要な場合
  forループまたはforEachメソッドが適している。
• オブジェクトの場合
  for...inまたはObject.keysとforループが適している。
• 配列の場合
  for...of、forEach、またはforループが適している。