JavaScript基本【配列の操作】

pushメソッドを使用することで、配列に値を追加することができます。

See the Pen zYYBVdZ by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

See the Pen abbZgVw by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

forEachメソッドを使用することで、その配列の中身それぞれに処理をすることができます。

上記の例では、配列numbersの中身の値に対しnumberと命名し、それぞれに２を掛けたものを出力しています。

アロー関数を使用しています。

See the Pen xxxOoYX by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

findメソッドでは指定された条件を満たす最初の要素を見つけることができます。

配列の先頭から検証していき、見つけた時点で処理を終了するため、上記の例では６のみが出力されています。

配列の要素がオブジェクトでも使用することが可能です。

See the Pen GRRqbzL by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

年齢が23歳という条件で先頭の要素を取り出すことができました！

上記では先頭の１つしか取り出せませんでしたが、条件を満たす要素を全て取り出したい場合はfilterメソッドを使用します。

下記は先ほどと同じ配列内容、条件ですが、条件を満たす全ての要素を取り出すことができていることがわかると思います。

See the Pen BaazgEB by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

See the Pen ExxyBzo by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

mapメソッドは配列の中身に対し処理を行ったうえで新しい配列を生成します。

See the Pen YzzWmXg by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

priceリストの中身を崩さないまま、税込み価格を格納した新しい配列ができていることを確認できると思います。

※Math.floor()は「切り捨て」処理を行っています。

もちろん、オブジェクトでも使用可能。

See the Pen qBBNemL by すず@progateでお勉強はじめました (@hpsuzucat) on CodePen.

動物の種類によって自己紹介文を変えることができました！！

SuzuBlog