【for…of文】「使い方」と「プログラム例」などをわかりやすく解説！

この記事では『for…of文』について、

• for…of文とは
• for…of文のプログラム例
  • 配列に対して繰り返し処理をする
  • Setオブジェクトに対して繰り返し処理をする
  • Mapオブジェクトに対して繰り返し処理をする
  • 文字列に対して繰り返し処理をする
• for…of文でオブジェクトをループする方法
• for…of文でインデックスがほしい場合の対応方法

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

for…of文とは

for…of文は、配列などの反復可能オブジェクトを順に処理する際に用います。

for…of文の構文を以下に示します。

for(変数 of 反復可能オブジェクト){
  反復可能オブジェクトの各要素に対する繰り返し処理
}

反復可能オブジェクトの要素数回だけ繰り返し処理を行います。

• 配列やSetオブジェクトの場合
  • 繰り返し処理を行うたびに、変数には値が格納されます。
• Mapオブジェクトの場合
  • 繰り返し処理のたびに、変数にはプロパティと値が対になった配列が[プロパティ,値]という形式で格納されます。
• 文字列の場合
  • 繰り返し処理のたびに、変数には文字が格納されます。

for…of文のプログラム例

for…of文のプログラム例(配列に対して繰り返し処理をする)

for…of文を用いて、配列に対して繰り返し処理をしているプログラム例を以下に示します。

const fruits = ['りんご', 'バナナ', 'オレンジ'];

for (const fruit of fruits) {
  console.log(fruit);
}

// ログ出力結果
// りんご
// バナナ
// オレンジ

for...of文は配列の要素数だけ繰り返し処理が行われるので、上記のプログラムの場合、3回処理が繰り返しています。また、変数fruitには、順番に「りんご」、「バナナ」、「オレンジ」という文字列が代入されます。なお、上記のプログラムでは、各要素に対して再代入をしないので、constを用いています。各要素に対して再代入をする必要がある場合には、letを用いてください。

なお、for...of文ではなくfor文を用いた場合には以下のように記述します。

const fruits = ['りんご', 'バナナ', 'オレンジ'];

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

// ログ出力結果
// りんご
// バナナ
// オレンジ

for文を用いた場合、配列名[インデックス]で配列の各要素にアクセスしたり、配列の要素数を取得するために、lengthプロパティを用いたりするので、コードが複雑になります。for...of文を用いることでコードがシンプルになります。

for…of文のプログラム例(Setオブジェクトに対して繰り返し処理をする)

for…of文を用いて、Setオブジェクトに対して繰り返し処理をしているプログラム例を以下に示します。

const fruits = new Set(['りんご', 'バナナ', 'オレンジ']);

for (const fruit of fruits) {
  console.log(fruit);
}

// ログ出力結果
// りんご
// バナナ
// オレンジ

for...of文は配列の要素数だけ繰り返し処理が行われるので、上記のプログラムの場合、3回処理が繰り返しています。また、変数fruitには、順番に「りんご」、「バナナ」、「オレンジ」という文字列が代入されます。

for…of文のプログラム例(Mapオブジェクトに対して繰り返し処理をする)

for…of文を用いて、Mapオブジェクトに対して繰り返し処理をしているプログラム例を以下に示します。

const map = new Map([
  ['apple', 'りんご'],
  ['banana', 'バナナ'],
  ['orange', 'オレンジ'],
]);

for (const fruit of map) {
  console.log(fruit[0], fruit[1]);
}

// ログ出力結果
// apple りんご
// banana バナナ
// orange オレンジ

for…of文の変数fruitは配列であり、配列の0番目にキーが格納され、1番目に値が格納されます。

const map = new Map([
  ['apple', 'りんご'],
  ['banana', 'バナナ'],
  ['orange', 'オレンジ'],
]);

// 配列の分割代入を使うことで、キーと値を変数keyと変数valueに直接代入している。
for (const [key, value] of map) {
  console.log(key, value);
}

// ログ出力結果
// apple りんご
// banana バナナ
// orange オレンジ

for…of文のプログラム例(文字列に対して繰り返し処理をする)

for…of文を用いて、文字列に対して繰り返し処理をしているプログラム例を以下に示します。

const str = 'hello';

for (const ch of str) {
  console.log(ch);
}

// ログ出力結果
// h
// e
// l
// l
// o

for...of文は文字列の長さだけ繰り返し処理が行われるので、上記のプログラムの場合、5回処理が繰り返しています。また、変数chには、順番に「h」、「e」、「l」、「l」、「o」という文字が代入されます。

for…of文でオブジェクトをループする方法

for…of文ではオブジェクトをループすることはできません。

しかし、Object.keysメソッド、Object.valuesメソッド、またはObject.entriesメソッドを用いれば、for…of文を利用することができるようになります。

Object.keysメソッドを用いた場合

Object.keysメソッドを用いることで、オブジェクトのキーで構成された配列を作成することができます。この配列に対して、for…of文を利用します。

const fruits = {
  apple: 'りんご',
  banana: 'バナナ',
  orange: 'オレンジ',
};

// Object.keysメソッドを用いて、オブジェクトのキーで構成された配列
const keysArray = Object.keys(fruits);

console.log(keysArray);
// ログ出力結果
// [ 'apple', 'banana', 'orange' ]

for (const key of keysArray) {
  console.log(key, fruits[key]);
}
// ログ出力結果
// apple りんご
// banana バナナ
// orange オレンジ

Object.valuesメソッドを用いた場合

Object.valuesメソッドを用いることで、オブジェクトの値で構成された配列を作成することができます。この配列に対して、for…of文を利用します。

const fruits = {
  apple: 'りんご',
  banana: 'バナナ',
  orange: 'オレンジ',
};

// Object.valuesメソッドを用いて、オブジェクトの値で構成された配列を作成
const valuesArray = Object.values(fruits);

console.log(valuesArray);
// ログ出力結果
// [ 'りんご', 'バナナ', 'オレンジ' ]

for (const value of valuesArray) {
  console.log(value);
}
// ログ出力結果
// りんご
// バナナ
// オレンジ

オブジェクトの値のみが必要な場合には、Object.valuesメソッドを用いた方がシンプルなプログラムになります。

Object.entriesメソッドを用いた場合

Object.entriesメソッドを用いることで、オブジェクトのキーと値がペアになった配列を作成することができます。この配列に対して、for…of文を利用します。

const fruits = {
  apple: 'りんご',
  banana: 'バナナ',
  orange: 'オレンジ',
};

// Object.entriesメソッドを用いて、オブジェクトのキーと値がペアになった配列を作成
const entriesArray = Object.entries(fruits);

console.log(entriesArray);
// ログ出力結果
// [ [ 'apple', 'りんご' ], [ 'banana', 'バナナ' ], [ 'orange', 'オレンジ' ] ]

for (const entry of entriesArray) {
  console.log(entry[0], entry[1]);
}
// ログ出力結果
// apple りんご
// banana バナナ
// orange オレンジ

const fruits = {
  apple: 'りんご',
  banana: 'バナナ',
  orange: 'オレンジ',
};

// Object.entriesメソッドを用いて、オブジェクトのキーと値がペアになった配列を作成
const entriesArray = Object.entries(fruits);

// 配列の分割代入を使うことで、キーと値を変数keyと変数valueに直接代入している。
for (const [key, value] of entriesArray) {
  console.log(key, value);
}
// ログ出力結果
// apple りんご
// banana バナナ
// orange オレンジ

for…of文でインデックスがほしい場合

配列の場合、Array.entriesを用いると、インデックスと値のペアに対して、繰り返し処理をすることができるようになります。

const fruits = ['りんご', 'バナナ', 'オレンジ'];

for (const fruit of fruits.entries()) {
  console.log(fruit[0], fruit[1]);
}

// ログ出力結果
// 0 りんご
// 1 バナナ
// 2 オレンジ

本記事のまとめ

この記事では『for…of文』について、以下の内容を説明しました。

• for…of文とは
• for…of文のプログラム例
  • 配列に対して繰り返し処理をする
  • Setオブジェクトに対して繰り返し処理をする
  • Mapオブジェクトに対して繰り返し処理をする
  • 文字列に対して繰り返し処理をする
• for…of文でオブジェクトをループする方法
• for…of文でインデックスがほしい場合の対応方法

お読み頂きありがとうございました。