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

JavaScriptのfor...inループとは？オブジェクトのプロパティを繰り返し処理する方法

JavaScriptのfor...inループは、オブジェクトが持つプロパティを1つずつ順番に取り出して処理するための繰り返し構文です。オブジェクト内のすべての列挙可能なプロパティに対して同じ処理を実行したい場合に非常に便利です。

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

for...inループは次のように記述します。

for (変数名 in オブジェクト) {
    実行する文またはブロック
}

ループが1回まわるごとに、オブジェクトのプロパティ名（キー）が変数に代入され、ブロック内の処理が実行されます。すべてのプロパティを処理し終えると、ループは自動的に終了します。

for...inループの使用例

次の例では、Webブラウザのnavigatorオブジェクトが持つすべてのプロパティ名を画面に一覧表示します。

<html>
   <body>
      <script>
         var aProperty;
         document.write("Navigator Object Properties<br /> ");

         for(aProperty in navigator) {
            document.write(aProperty);
            document.write("<br />");
         }
         document.write("Exiting from the loop!");
      </script>
   </body>
</html>

実行結果の出力

このコードを実行すると、まず「Navigator Object Properties」という見出しが表示され、続いてnavigatorオブジェクトの各プロパティ名が1行ずつ出力されていきます。すべてのプロパティの表示が完了すると、最後に「Exiting from the loop!」というメッセージが出力され、プログラムが終了します。

for...inループを使う際の注意点

  • 配列への使用は非推奨： for...inは配列にも使えますが、要素の順序が保証されないため、配列の反復処理にはfor...ofやforEach()を使用するのが一般的です。
  • 継承されたプロパティも列挙される： オブジェクトがプロトタイプチェーン経由で継承しているプロパティも対象になるため、必要に応じてhasOwnProperty()で判定すると安全です。
  • 取得できるのはキーのみ： ループ変数に入るのはプロパティ名（キー）であり、値そのものではありません。値を取り出すにはオブジェクト[キー]のようにブラケット記法でアクセスします。
  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

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

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