JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

JavaScriptのfor...ofループは、配列、文字列、配列風オブジェクト（Array-like objects）、NodeListなど、反復可能（イテラブル）なオブジェクトの要素を先頭から順番に1つずつ取り出して処理するための構文です。

インデックスの管理が不要なため、従来のforループやforEachメソッドと比べてコードが簡潔になり、可読性や保守性が向上するというメリットがあります。

for...ofループの基本構文

for (変数 of 反復可能オブジェクト) {
  // 各要素に対して実行したい処理
}

サンプルコード

次の例では、for...ofループを使って文字列「Hello」を1文字ずつ取り出し、クリック操作で画面に表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>for..of loop JavaScript</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、for..ofループで文字列を1文字ずつ繰り返し処理します
</h3>
<script>
   let resEle = document.querySelector(".result");
   let sampleEle = document.querySelector(".sample");
   let str = "Hello";
   sampleEle.innerHTML = str;
   document.querySelector(".Btn").addEventListener("click", () => {
      for (i of str) {
         resEle.innerHTML += i + "<br>";
      }
   });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、最初は次のように表示されます。

【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

「CLICK HERE」ボタンをクリックすると、for...ofループによって文字列の各文字（H・e・l・l・o）が1行ずつ緑色の領域に出力されます。

【初心者向け】JavaScriptのfor...ofループの使い方を実例つきで解説

このように、for...ofループを使えば文字列だけでなく、配列やMap、Set、NodeListなど、あらゆる反復可能オブジェクトをシンプルに扱うことができます。

  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照

  2. JavaScriptのforループを使って空のオブジェクトにプロパティを設定する方法

    JavaScriptでは、for...inループを使うことで、既存のオブジェクトから空のオブジェクトへプロパティを簡単にコピーできます。以下に、forループを使用して空のオブジェクトにプロパティを設定するサンプルコードを紹介します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,