Menu
Coddy logo textTech

for...of ループ

CoddyのJavaScriptジャーニー「基礎」セクションの一部 — レッスン 65/77。

for...of ループは、配列、文字列、マップ、セットなどの反復可能オブジェクトの値を反復処理するためのシンプルな方法を提供します。これは、forEach の簡潔さと、breakcontinue を使用できる機能を兼ね備えています。

for...ofループの基本的な構文は以下の通りです:

for (const element of iterable) {
    // 各要素に対して実行されるコード
}
  • element: 各反復において、反復可能オブジェクトからの次の値がこの変数に代入されます。
  • iterable: 要素が反復処理されるオブジェクト(例:配列や文字列)。

配列を使用した例を次に示します:

const fruits = ["apple", "banana", "orange"];

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

出力:

apple
banana
orange

文字列を使用した別の例を次に示します:

const text = "hello";

for (const char of text) {
    console.log(char);
}

出力:

h
e
l
l
o

従来の for ループや forEach メソッドと比較して、for...of は、特に各要素のインデックスが必要ない多くの一般的なユースケースにおいて、より簡潔な構文を提供します。

challenge icon

チャレンジ

簡単

引数として文字列を受け取り、その文字列内の母音(a, e, i, o, u)の数を返す countVowels という名前の関数を記述してください。文字列の文字を反復処理するには、for...of ループを使用してください。

例:

  • countVowels("hello") は 2 を返す必要があります
  • countVowels("javascript") は 3 を返す必要があります

大文字もカウントしてください!

チートシート

for...ofループは、配列や文字列のような反復可能オブジェクトの値を反復処理するためのシンプルな方法を提供します。これは、forEachの簡潔さと、breakcontinueを使用できる機能を兼ね備えています。

基本的な構文:

for (const element of iterable) {
    // 各要素に対して実行されるコード
}

配列を使用した例:

const fruits = ["apple", "banana", "orange"];

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

文字列を使用した例:

const text = "hello";

for (const char of text) {
    console.log(char);
}

自分で試してみよう

function countVowels(str) {
    // ここにコードを書いてください
}
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

基礎のすべてのレッスン