みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回は配列とオブジェクトの複合型について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- 配列の復習ができる
- オブジェクトの復習ができる
- 配列とオブジェクトの複合データが扱える
配列とは
複数のデータを入れておく箱です
例えば、Fishesという箱の中に
ナマズ, サケ, タイ
の3匹が入っているようなイメージです。
■構文
配列名 = [データ0, データ1, データ2]忘れちゃった人は復習しよう！
配列のデータを取り出したい
配列のデータはindexつまり番号で管理されています。
このように、
- fishesの0番目…”ナマズ”
- fishesの1番目…”サケ”
- fishesの2番目…”タイ”
というようにデータが管理されているので、
配列のN番目のデータを取り出す、という処理を行います
■構文
配列名[index番号]先ほどの例ですと、
console.log(fishes[0])
// "ナマズ"
console.log(fishes[1])
// "サケ"
console.log(fishes[2])
// "タイ"というようにデータが管理されています
オブジェクトとは
かなり簡潔に説明するといくつかの情報をまとめたモノの俗称や概念のようなものです。
例えばですが、
・it
・モノ
・スマホ
・魚
のような感じです。
魚のイメージだとわかりやすいと思いますが、
「魚」とだけ聞いても、明確に何を指しているのかわかりませんよね？
このように明確に何かはわからないが、
このモノの情報全体をまとめたものがオブジェクトです。
■ 構文
オブジェクト名 = {
key: value,
key: value,
key: value
}画像のような情報を持つオブジェクトは
このように記述することが出来ます。
// オブジェクトの宣言
const fish = {
// key: value
name: "サケ",
size: 60,
lifeSpan: 5,
};
// オブジェクトを出力
console.log(fish);
// 【出力結果】{ name: 'サケ', size: 60, lifeSpan: 5 }オブジェクトのデータを取り出したい
■ 構文
オブジェクト名.key;先ほどのfishオブジェクトから特定のキーの値を取り出してみましょう。
// オブジェクトの宣言
const fish = {
// key: value
name: "サケ",
size: 60,
lifeSpan: 5,
};
// fishのなまえを出力
console.log(fish.name);
// 【出力結果】サケ
このように取得することが出来ます。
複数のオブジェクトのデータを持つ配列
配列とオブジェクトは複合して使う事ができます、
つまり、配列の中に複数のオブジェクトをもたせることも出来ます。
以下のような、複数のオブジェクト持つ配列fishesをつくり
データを取り出してみましょう。
- 0番目・・・ナマズの情報を持つオブジェクト
- 1番目・・・サケの情報を持つオブジェクト
- 2番目・・・タイの情報を持つオブジェクト
// オブジェクトの宣言
const fishes = [
// 0番目
//key : value
{ name: "ナマズ",
size: 70,
lifeSpan: 15,
},
// 1番目
//key : value
{ name: "サケ",
size: 60,
lifeSpan: 5,
},
// 2番目
//key : value
{ name: "タイ",
size: 80,
lifeSpan: 30,
}
];
// 配列fishesの1番目の、nameというkeyの値を取得
console.log(fishes[1].name);
// 【出力結果】サケこのように、配列のN番目のデータの特定のkeyの情報を取得することが出来ました
valueに配列を持つオブジェクト
先ほどとは逆に、配列のデータを持つ、オブジェクトuserを作ってみましょう
なまえ：サメハック
年齢：28
趣味：[プログラミング, 読書, 筋トレ]
// オブジェクトの宣言
const user = {
name: "サメハック",
age: 28,
hobby: ["プログラミング", "読書", "筋トレ"]
}
// オブジェクトuserの、hobbyというキーの1番目のvalueを取得
console.log(user.hobby[1]);
// 【出力結果】読書このようにオブジェクトの中に配列を入れることが出来ました！
まとめ
- 配列とオブジェクトを複合したデータ構成を作ることが可能
- 純粋に組み合わさっているだけなので、データを取り出す際も組み合わせて条件を指定することで取り出せます。
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
