スキルアップを始める

【for…of文】JavaScriptの繰り返し処理について

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

JavaScriptのfor...of文を使用した様々なパターンの具体的な例を示します。この文は、配列やマップ、セットなどの反復可能オブジェクトの各要素に対して繰り返しを行うのに適しています。

配列の要素を反復処理する

let fruits = ['りんご', 'バナナ', 'いちご'];

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

このコードは、配列fruitsの各要素(りんご、バナナ、いちご)を順にコンソールに出力します。

情報	りんご
情報	バナナ
情報	いちご

Mapオブジェクトのエントリを反復処理する

  let capitals = new Map([
    ['日本', '東京'],
    ['フランス', 'パリ'],
    ['アメリカ', 'ワシントンD.C.']
  ]);

  for (let [country, capital] of capitals) {
    console.log(country,capital);
    console.log(`${country}の首都は${capital}です。`);
  }

このコードは、Mapオブジェクトcapitalsの各エントリ(キーと値のペア)を順にコンソールに出力します。

情報	日本 東京
情報	日本の首都は東京です。
情報	フランス パリ
情報	フランスの首都はパリです。
情報	アメリカ ワシントンD.C.
情報	アメリカの首都はワシントンD.C.です。

Setオブジェクトの要素を反復処理する

let uniqueNumbers = new Set([1, 2, 3, 4, 4, 5]);

for (let number of uniqueNumbers) {
    console.log(number);
}

このコードは、SetオブジェクトuniqueNumbersの各要素(1, 2, 3, 4, 5)を順にコンソールに出力します。Setは重複を許さないので、4は一度だけ表示されます。

情報	1
情報	2
情報	3
情報	4
情報	5

文字列の各文字を反復処理する

let greeting = 'こんにちは';

for (let char of greeting) {
    console.log(char);
}

このコードは、文字列greetingの各文字(こ、ん、に、ち、は)を順にコンソールに出力します。

情報	こ
情報	ん
情報	に
情報	ち
情報	は

まとめ

これらの例を通して、for...of文が様々な反復可能オブジェクトを簡潔に扱えるツールであることがわかります。

Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら