Help us understand the problem. What is going on with this article?

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

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

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

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

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

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

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

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

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

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

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

配列

  • 複数の値をまとめて管理する
  • データの要素を[ ]を使って囲む
  • 要素と呼ばれる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円不足しているため、ラーメンを注文できません
カツ丼は注文可能です。

まとめ

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

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

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

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

おわり。

impl_chamuji
日本人だけど日本語ガバガバな初心者エンジニア
impl
ReactNativeのリーディングカンパニー
https://impl.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away