2020/08/24

JavaScriptの配列をfor文で取り出す方法【現役エンジニアが解説】

PROGRAM

今回は、JavaScriptの配列をfor文で取り出す方法について、配列と連想配列に分け、簡単に解説していきます。

配列

以下のような配列の各要素の値を取り出すためにはループ処理が必要となります。

var names = ["山田","田中","髙橋"];

そこでfor文を使うことにより、特に要素の数がわからない場合や多い場合でも簡単に取り出すことができます。

for (var i=0;i<names.length;i++) {
    console.log(names[i]);
}

上記のコードでは、namesという配列の要素の数だけループ処理を行い、各要素の値をログに出力する内容となっています。

連想配列

以下のような連想配列も、配列の場合同様、for文で各要素のキーと値を取り出すことが可能です。

var member = {"name":"山田","age":"24","gender":"男性"};

連想配列の各要素の値の取り出し方は、配列で”[]”を付けて番地を指定していたところをキー文字列に変更するだけです。

for (var key in member) {
    console.log("key:"+member[key]);
}

上記のコードでは、memberという連想配列の要素の数だけループ処理を行い、各要素のキー文字列と値をログに出力する内容となっています。

配列の中の連想配列

データベースやWebAPIとの連携では、以下のような配列の中に連想配列があるデータ構造であることが最も多いです。

var members = [
    {"name":"山田","age":"24","gender":"男性"},
    {"name":"田中","age":"26","gender":"女性"},
    {"name":"高橋","age":"27","gender":"女性"}
];

このエクセルのようなデータ構造のデータを取り出していくためには、for文を2つ用意する必要があり、外側のfor文では配列用にカウンタ変数を使います。

for (var i=0;i<members.length;i++) {
    for (var key in members[i]) {
        console.log(members[i][key]);
    }
}

上記のコードでは、membersという配列の要素の数だけループ処理を行ったうえで、さらにその中にある連想配列の要素の数だけループ処理を行い、各要素のキー文字列と値をログに出力する内容となっています。

• facebook
• Tweet
• Read Later