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

JavaScriptのfor...in文を使って配列をループ処理する方法

for...inループは、主にオブジェクトのプロパティを反復処理するために使用される構文です。しかし、配列に対しても使用でき、配列のインデックス（キー）を順番に取得しながら各要素へアクセスすることが可能です。

for...in文の基本構文

for...in文は、以下のような形式で記述します。

for (変数 in オブジェクト) {
  // 繰り返し処理
}

サンプルコード

次のコードを実行すると、for...in文を使って配列をループ処理する方法を確認できます。

ライブデモ：

<html>
   <body>
      <script>
         var items = new Array('Hello', 'World');
         var i = 0;

         for (var i in items) {
            document.write(items[i]);
         }
      </script>
   </body>
</html>

実行結果

HelloWorld

このコードでは、配列 items のインデックス「0」と「1」が順番に変数 i に代入され、items[i] によって各要素が出力されます。

注意点

for...in文は配列のインデックスを文字列として返すほか、配列オブジェクトに追加されたカスタムプロパティまで列挙してしまう可能性があります。そのため、純粋に配列の要素を反復処理したい場合は、for...of文やforEach()メソッドを使用する方が安全で推奨されています。

  1. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数

  2. JavaScriptでオブジェクトを含む「配列の配列」をループ処理する方法

    JavaScriptでオブジェクトを含む多次元配列をループするには？JavaScriptでは、オブジェクトを含む配列の配列（入れ子構造の配列）をループ処理する際、forEach()メソッドをネストして使用し、さらにfor...inループで各オブジェクトのプロパティにアクセスするのが一般的な方法です。以下に、具体的な実装例を紹介します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device