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

JavaScriptでオブジェクト内の配列をループ処理する方法を解説

オブジェクトの中に格納された配列をループ処理する方法は、オブジェクト自体をループ処理する場合と基本的に同じです。オブジェクト内の配列を走査するには、for...in ループを使用します。

for...in ループとは

「for...in」ループは、オブジェクトのプロパティや配列のインデックスを順番に取り出して繰り返し処理を行うための構文です。ネストされた構造（オブジェクトの中に配列、さらにその中にオブジェクトや配列があるようなデータ）に対しては、for...in ループを入れ子にすることで、すべての要素にアクセスできます。

サンプルコード

次の例では、「obj」というオブジェクトを定義しています。このオブジェクトは「companies」という配列を持っており、その各要素はさらに「name」という配列を含んでいます。外側の for...in ループで companies 配列を走査し、内側の for...in ループで各会社名の配列を取り出して表示します。

<html>
<body>
   <script>
      var res = "";
      var obj = {
          "name": "Elon musk",
          "age": 48,
          "companies": [
              {"location": "Newyork", "name": ["Tesla", "Spacex", "Neuralink"]},
              {"location": "Florida", "name": ["paypal", "solarcity"]}
          ]
      };
      for (var i in obj.companies) {
          res += "The companies in " + " " + obj.companies[i].location + "</br>";
          for (var j in obj.companies[i].name) {
              res += obj.companies[i].name[j] + "</br>";
          }
      }
      document.write(res);
   </script>
</body>
</html>

実行結果

The companies in Newyork
Tesla
Spacex
Neuralink
The companies in Florida
paypal
solarcity

補足：より現代的なループ方法

上記のコードでは document.write() を使用していますが、実際の開発では DOM 操作や console.log() を使うのが一般的です。また、配列の走査には forEach() メソッドや for...of ループを使うと、より簡潔で読みやすいコードになります。for...in ループはプロトタイプチェーン上のプロパティも列挙する可能性があるため、純粋な配列の反復処理には for...of や forEach の使用が推奨される場面も多い点に注意しましょう。

  1. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev

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

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