y toku ブログ

inclusion を目指す

JavaScript 超初心者向け -- 配列内にオブジェクトがある際のループを試してみる --

今日は配列の中にあるオブジェクトへのアクセス方法を書いて見たいと思います。これまで、オブジェクトのループや配列のループを書きました。 いろいろネットで検索すると、配列の要素としてオブジェクトを持つものが多くあり、これらをループ処理をするにはどうすればいいのだろうかという素朴な疑問からまずはテストしてみました。

まずはサンプルから。

var arr = [
    {id: 1, animal: "dog", age: 10},
    {id: 2, animal: "dog", age: 2},
    {id: 3, animal: "cat", age: 15},
    {id: 4, animal: "cat", age: 4}
];

このような配列があったとき、age が ある値以上のものだけを抽出するにはどうすればよいのだろうかと疑問が湧いたので試してみました。

for...of を使う

前回書いた記事を利用して、for...of を利用して書いてみました。

function overAge(num) {
    var newArrOverAge = []; // 格納先の配列の初期化
    for (value of arr) {
        if (value.age > num) {
            newArrOverAge.push(value.id);
        }
    }
    return newArrOverAge;
}


// age が 5 より大きいオブジェクトのidを返してみる
overAge(5);
// => [1,3]  として配列で返してくれました。

f:id:yasuhikotoku:20190906155259p:plain

今回試したかったのは for (value of 配列名 ) で value で返ってくるものがオブジェクトであるということで、認識した通りの書き方でしっかり返してくれました。