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

JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。

for...inの基本的な構文

for (let 変数名 in オブジェクト) {
  // 各プロパティに対して実行したい処理
}

ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。

サンプルコード

以下は、for...in文を使ってJSON形式のオブジェクトを走査し、すべてのプロパティ名とその値を画面に表示する実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>for...in ステートメントの例</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample,.result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptの「for...in」ステートメント</h1>
<div class="sample">
{"firstName":"Rohan","lastName":"Sharma","age":22}
</div>
<div class="result" style="color: green;"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、for...inループでオブジェクトを走査します</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let obj = JSON.parse(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        for (let i in obj) {
            resultEle.innerHTML += "Property = " + i + " : Value = " + obj[i] + "<br>";
        }
    });
</script>
</body>
</html>

コードの解説

このコードでは、まずdocument.querySelector()でサンプルデータが表示された要素を取得し、その内容をJSON.parse()でJavaScriptオブジェクトに変換しています。ボタンがクリックされると、for...inループがオブジェクトの各プロパティを順に取り出し、「プロパティ名 : 値」という形式で結果表示用の要素へ追加していきます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

「CLICK HERE」ボタンをクリックすると、オブジェクトの全プロパティが以下のように出力されます。

JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

  • Property = firstName : Value = Rohan
  • Property = lastName : Value = Sharma
  • Property = age : Value = 22

注意点

for...inは配列にも使用できますが、配列のインデックス順序が保証されない場合があるため、配列の走査にはfor...ofやforEach()などを使用するのが一般的です。for...inは主にオブジェクトのキーを列挙したい場面で活用しましょう。

  1. JavaScriptのネイティブプロトタイプとは？仕組みと使い方を実例付きで解説

    ネイティブプロトタイプとは JavaScriptはプロトタイプベースの言語であり、「prototype」プロパティはその中核をなす重要な概念です。プロトタイプは、JavaScriptにおいて継承を実現するために使用されます。 ユーザー定義のカスタムオブジェクトだけでなく、String や Array といった組み込み（ネイティブ）オブジェクトもすべて prototype プロパティを持っています。このプロトタイプに新しいプロパティやメソッドを追加することで、既存オブジェクトの機能を自由に拡張できます。 ただし、ネイティブプロトタイプに対して行えるのは「編集」または「追加」のみであり、既存のプ

  2. JavaScriptのアロー関数（短縮関数）とは？thisの違いをサンプルコードで解説

    JavaScriptのアロー関数（短縮関数）とは？ アロー関数は、ES2015（ES6）で導入された関数の新しい記法で、「速記関数」「短縮関数」とも呼ばれます。従来のfunctionキーワードを使った関数式と比べて、はるかに短く簡潔に関数を記述できるのが大きな魅力です。 アロー関数最大の特徴は、thisへの独自のバインディングを持たないという点です。通常の関数では呼び出され方によってthisの値が変わりますが、アロー関数の場合は定義された場所の外側のスコープ（周囲のコンテキスト）からthisを受け継ぎます。これにより、ネストした関数の中でthisが意図しない値を指してしまうトラブルを簡単に回避