サイト管理者
WEB
JavaScript

馬鹿な。。。貴様は配列じゃない、、、オブジェクト、、、だと！？

WEB
この記事は約3分で読めます。

あ…ありのまま 起こった事を話すぜ！

おれは今　配列のデータを　ほんのちょっぴりだが　参照した

だが　配列のデータを参照できなかった

な…　何を言っているのか　わからねーと思うが　

おれも　何が起きたか　わからなかった…

頭がどうにかなりそうだった…　配列にデータがねぇだとか

そんなチャチなもんじゃあ　断じてねえ

もっと恐ろしいものの片鱗を　味わったぜ…

配列とオブジェクトってなんなんだ・・・・

なんか見た目似てるし、データ複数管理できるし、それぞれの違いってなんなんだよ。。。。。

配列

  • 複数の値をまとめて管理する
  • データの要素を[ ]を使って囲む
  • 要素と呼ばれる0から始まる数字でデータを管理
const name = ["佐藤","鈴木","高橋"];
console.log(name);
// 出力結果： Array ["佐藤", "鈴木", "高橋"]


//要素を指定
console.log(name[0]);
// 出力結果： "佐藤"

console.log(name[1]);
// 出力結果： "鈴木"

console.log(name[2]);
// 出力結果： "高橋"

オブジェクト（連想配列）

  • 連想配列とも呼ばれる
  • 複数のデータをまとめて管理
  • 要素を { } で囲む
  • オブジェクトはそれぞれの値にプロパティ(key)と呼ばれる文字列をつけてデータ（value）を管理
//アルファベット　プロパティ(key)
//苗字　　　　　データ(value)

const  name = {"A":"佐藤","B":"鈴木","C":"高橋"};
console.log(name);
// 出力結果： Object { A: "佐藤", B: "鈴木", C: "高橋" }

//プロパティ(key)を指定
console.log(name.A);
// 出力結果： "佐藤"

console.log(name.B);
// 出力結果： "鈴木"

console.log(name.C);
// 出力結果： "高橋"

配列とオブジェクトを合わせて使う

簡単な例：所持金で注文可能なもの判定
const  foods= [
{"name":"カレー","price":650},
{"name":"ラーメン","price":800},
{"name":"カツ丼","price":500}
];

const haveMoney = 600;

for(i=0; i<foods.length;i++){
  if(haveMoney > foods[i].price){
    console.log(`${foods[i].name}は注文可能です。`);
  }
  else{
    console.log(`所持金が${foods[i].price-haveMoney}円不足しているため、${foods[i].name}を注文できません`);
  }
}

実行結果

所持金が50円不足しているため、カレーを注文できません
所持金が200円不足しているため、ラーメンを注文できません
カツ丼は注文可能です。

まとめ

配列とオブジェクトそれぞれの使い方についてご説明させていただきました。
正直この記事を見ている方にとっては何を当たり前なことを説明してるんだよって思ったはずです。

この記事を書いた理由は、僕が大昔に配列だと思って参照した先が実はオブジェクトだったという非常にマヌケなことをしてしまったのを思い出して今ならちゃんと配列とオブジェクトの違い説明できるかなーと思って書きました。

いわば自分のための記事だよね。

ちゃんと説明できたかな・・・・不安だ。

おわり。