今回は、配列について復習しました。
絶賛、検索で連想配列、Objectなどを扱っているので、頭がこんがらがったので、基礎に立ち戻ろうと思います。
CONTENTS
配列？連想配列？ってなんなの？
複数のデータを扱いときに便利な配列。
こんな感じのやつです。今回は、文字列ですが、数値でもOK。
const mountain = ['槍ヶ岳', '白山', '富士山'];
// 槍ヶ岳が出力されます
console.log(mountain[0]);
もう一つ、よく聞くのが連想配列。こちらはさっきよりも、もう少しデータの構造が複雑になります。
先ほどの配列と違って、keyとvalue(値)を組み合わせて作られたデータです。
それぞれに、標高の高さと所在地のデータも追加することができました。
const mountains = [
{
name: '槍ヶ岳',
height: '3180',
prefecture: '長野'
},
{
name: '白山',
height: '2702',
prefecture: '石川',
},
{
name: '富士山',
height: '3776',
prefecture: '静岡',
},
];forEachメソッドを使って、配列をループして出力する
配列と切り離せないのがどうやって出力をするか。
forEachメソッドは配列を出力したいときに、便利です。下記のように出力ができます。
const mountains = [
{
name: '槍ヶ岳',
height: '3180',
prefecture: '長野'
},
{
name: '白山',
height: '2702',
prefecture: '石川',
},
{
name: '富士山',
height: '3776',
prefecture: '静岡',
},
];
//構文 配列.forEach([要素],[インデックス]) => { 処理 }
mountains.forEach((item, index) => {
console.log(item.name);
});配列の数をカウントする
配列と同じでよくみるのが、配列の数をカウントする方法。検索結果などで、何件ヒットしたかなどに使用できそうです。
//mountainsというのが、上で定義している連想配列の名前です。
const number = mountains.length;
// 3と出力されます。
console.log(number);参考のソース
上記の連想配列を出力してみたソースがこちら。
それぞれの配列を出力して、配列の数を表示させています。
こんな感じで、登山の登頂記録が出力できそうですね。
See the Pen Array by komame (@komame) on CodePen.
まとめ
配列、連想配列、オブジェクトなど、まだまだ用語が理解できていないので、実際のソースを見ながら、細かい用語は覚えていこうと思います。
