スキルアップを始める!

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

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

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文が様々な反復可能オブジェクトを簡潔に扱えるツールであることがわかります。

URLをコピーしました!