Zenn
🤟

【JS】配列じゃなくオブジェクトをループさせたい！！！

2022/04/04に公開
JavaScript
Node.js
TypeScript
frontend
es6
tech

これは何？

Javascriptで開発していると、配列ではなくてオブジェクトをループして処理したい時がちょくちょくあるので、オブジェクトをループするためにはどんな方法があるのかまとめてみました。

オブジェクトは、mapやforEachは使えない...

Javascriptのループ処理では、mapやforEach、filterなどの組み込み関数がありますが、これらの関数は、配列を操作する時のみしか使用できません！！！
オブジェクトを操作する際は、別の方法で操作する必要があります...

１度オブジェクトを配列にしてからループさせる！

オブジェクトをループさせるには１度オブジェクトを配列にしてからループの操作を行う必要があります。
オブジェクトを配列に変換するメソッドは以下の3つがあります。

  • Object.keys()
  • Object.values()
  • Object.entries()

Object.keys()

Object.keys()は、オブジェクトの持つプロパティのキーの配列を返します。

const fruits = {
  banana: 28,
  apple: 17,
  orange: 54,
}

const keys = Object.keys(fruits)
console.log(keys) // [banana, apple, orange]

Object.values()

Object.values()は、オブジェクトの持つプロパティの値の配列を返します。

const fruits = {
  banana: 28,
  apple: 17,
  orange: 54,
}

const values = Object.values(fruits)
console.log(values) // [28, 17, 54]

Object.entries()

Object.entries()は、オブジェクトの持つプロパティのキーと値の配列からなる配列を返します。
つまり、配列の中にさらに配列でオブジェクトのキーと値を[key, value]の形で持ちます。

const fruits = {
  banana: 28,
  apple: 17,
  orange: 54,
}

const entries = Object.entries(fruits)
console.log(entries)
// [[apple, 28], [orange, 17], [pear, 54]]

配列に変換したものをループ操作してみよう！

では、オブジェクトを配列に変換したものを使って、実際にループ操作をしてみましょう！

Object.keysで取得した、キーの配列をforEachでループ操作を行います。

const fruits = {
  banana: 28,
  apple: 17,
  orange: 54,
}

const keys = Object.keys(fruits)
keys.forEach((key) => console.log(fruits[key]))
// 28, 17, 54

Object.entiresで取得した、キーと値の配列をfor ofでループ操作を行います。
const [fruits, count] of entriesは分割代入を使って、entriesの中身を変数に代入しています。

const fruits = {
  banana: 28,
  apple: 17,
  orange: 54,
}

const entries = Object.entries(fruits)
for(const [fruits, count] of entries) {
  console.log(`${fruits}は、${count}個あります`)
}
// "bananaは、28個あります"
// "appleは、17個あります"
// "orangeは、54個あります"

まとめ

  • オブジェクトをループして処理したい場合は、1度配列に変換してから、変換後の配列をループで操作する必要がある。
  • オブジェクトを配列に変換する方法は以下の３つがあります。
    • Object.keys()
    • Object.values()
    • Object.entries()

配列のループ操作をするときはすぐに思いつくのですが、オブジェクトをループしたいときにパッと出ないときはぜひこちらの記事を参考にしてみてください！！！

Discussion