Menu
CoddyTech

for...of ループ

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

for...ofループを使うと、配列、文字列、マップ、セットなどの反復可能なオブジェクトの値を簡単に反復処理できます。forEachの簡潔さと、breakやcontinueを使える機能を兼ね備えています。

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

チャレンジ

簡単

countVowelsという名前の関数を作成してください。この関数は文字列を引数として受け取り、その文字列に含まれる母音(a、e、i、o、u)の数を返します。for...ofループを使って文字列の各文字を反復処理してください。

例:

  • countVowels("hello")は2を返します
  • countVowels("javascript")は3を返します

大文字も数えてください!

自分で試してみよう

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

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

基礎のすべてのレッスン

自分で練習してみよう: JavaScriptオンラインコンパイラ