【JavaScript】オブジェクトのkey名をループ処理で取得しよう!【for~in】

JavaScript

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

今回はJavaScriptのfor~in文を使ったオブジェクトのkey名の取得方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • for~in文の使い方がわかる
  • オブジェクトのkey名の取得方法がわかる
みんな大好きループ処理だよ!

オブジェクトについて:復習

オブジェクトとは

簡潔に説明するといくつかの情報をまとめたモノの俗称や概念のようなものです。

例えばですが、
・it
・モノ
・スマホ
・魚
のような感じです。

魚のイメージだとわかりやすいと思いますが、
「魚」とだけ聞いても、明確に何を指しているのかわかりませんよね?

このように明確に何かはわからないが、
このモノの情報全体をまとめたものがオブジェクトです。

keyとvalueについて

■ 構文

オブジェクト名 = {
    key: value,
    key: value,
    key: value
}

画像のような情報を持つオブジェクトは
このように記述することが出来ます。

// オブジェクトの宣言
const fish = {
  // key: value
  name: "サケ",
  size: 60,
  lifeSpan: 5,
};

// オブジェクトを出力
console.log(fish);
// 【出力結果】{ name: 'サケ', size: 60, lifeSpan: 5 }

オブジェクトのデータを取り出したい

先ほどのfishオブジェクトから特定のキーの値を取り出してみましょう。

■ 構文

オブジェクト名.key;
// オブジェクトの宣言
const fish = {
  // key: value
  name: "サケ",
  size: 60,
  lifeSpan: 5,
};

// fishのなまえを出力
console.log(fish.name);
// 【出力結果】 サケ

このように取得することが出来ます。

オブジェクトについてもう少し詳しく知りたい方はこちら

【JavaScript】オブジェクトを世界一わかりやすく解説!!自信あり【key, value】
JavaScriptのオブジェクトをこれ以上無いくらい分かりやすく解説しました この記事を読むと・・・ オブジェクトの概念が理解できる オブジェクトから期待の値を取得できる

for~in文を用いてkeyを取得しよう

ようやく本題に入ります。

オブジェクトのkey名をループ処理にて取得するにはfor~in文を使います

■構文

for(let 変数名 in オブジェクト名){
    // 処理
}

先程の魚の例を元に、プロパティのkey名を取得してみましょう

// オブジェクトの宣言
const fish = {
  // key: value
  name: "サケ",
  size: 60,
  lifeSpan: 5,
};

// オブジェクトのプロパティのkey名を順番に取得
for (let key in fish) {
  // 取得したkey名
  console.log(key);
}

/*  【出力結果】
name
size
lifeSpan
*/

このようにkey名をループ処理を用いて取得することが出来ました。

もちろんですが、取得したkey名を元に対応するvalueを取得することも可能です。

// オブジェクトの宣言
const fish = {
  // key: value
  name: "サケ",
  size: 60,
  lifeSpan: 5,
};

// オブジェクトのプロパティのkey名を順番に取得
for (let key in fish) {
  // 取得したkey名
  console.log("key: " + key);
  // 取得したkeyを元にvalueを取得
  console.log("value: " + fish[key]);
}


/*  【出力結果】
key: name
value: サケ
key: size
value: 60
key: lifeSpan
value: 5
*/

このように指定することで、対応するvalueの値を取得することが出来ました。

オブジェクト名[取得したkey名]
for~in文を使いこなせるようになってえらい!

おまけ:問題

以下のユーザーリストからfor~in文を用いて指定の出力を取り出してください

const userList = {
  //key  : value
  "ユーザ1": { name: "サメハック", age: 29 },
  "ユーザ2": { name: "ねこハック", age: 20 },
  "ユーザ3": { name: "いぬハック", age: 34 },
};

/* 【出したい出力】 
key: ユーザ1
name: サメハック
key: ユーザ2
name: ねこハック
key: ユーザ3
name: いぬハック
*/
プロパティのvalueがオブジェクトになっているよ!

まとめ

  • オブジェクトのプロパティのkey名をループ処理で取得するにはfor~in文を使う
  • for (let 変数名 in オブジェクト名){}

おまけ:答え

const userList = {
  //key  : value
  "ユーザ1": { name: "サメハック", age: 29 },
  "ユーザ2": { name: "ねこハック", age: 20 },
  "ユーザ3": { name: "いぬハック", age: 34 },
};

// オブジェクトのプロパティのkey名を順番に取得
for (let key in userList) {
  // 取得したkey名
  console.log("key: " + key);
  // 取得したkeyを元に、オブジェクトの子要素のvalueを取得
  console.log("name: " + userList[key].name);
}

このように処理を行うことで以下の順にデータを取得することが出来ます。
①for~in文 → userListのkey名(“ユーザ1” / “ユーザ2” / “ユーザ3”)を取得
②ユーザ1のvalueはオブジェクトなので、ユーザ1のnameというkeyを指定
→ “サメハック” というvalueが取得できる

ちょっと難しかったかな?

実務では基本的にデータ構造が複雑なので、
オブジェクトと配列が複雑に絡まったデータの処理に慣れよう!

オブジェクトと配列の複合データについてはこちら!

【JavaScript】配列とオブジェクトの複合
この記事を読むと・・・ 配列の復習ができる オブジェクトの復習ができる 配列とオブジェクトの複合データが扱える

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました