JavaScript オブジェクトをループする：keys・values・entries

オブジェクトのキーや値を繰り返し処理するには Object.keys()・Object.values()・Object.entries() を使います。

早わかりまとめ

メソッド	返す内容	向いている用途
`Object.keys()`	キーの配列	キー一覧を取得・ループ
`Object.values()`	値の配列	値だけ処理したい
`Object.entries()`	`[key, value]` の配列	キーと値の両方を使う

Object.keys()：キーの配列を取得する

const user = { name: 'Alice', age: 25, active: true }

Object.keys(user)
// ['name', 'age', 'active']

// ループ
Object.keys(user).forEach((key) => {
  console.log(key, user[key])
})
// name Alice
// age 25
// active true

Object.values()：値の配列を取得する

const scores = { math: 80, english: 75, science: 90 }

Object.values(scores)
// [80, 75, 90]

// 合計を計算
const total = Object.values(scores).reduce((sum, score) => sum + score, 0)
console.log(total) // 245

Object.entries()：キーと値をセットで扱う

const prices = { apple: 100, banana: 80, cherry: 200 }

Object.entries(prices)
// [['apple', 100], ['banana', 80], ['cherry', 200]]

// 分割代入でキーと値を取り出す
Object.entries(prices).forEach(([item, price]) => {
  console.log(`${item}: ${price}円`)
})
// apple: 100円
// banana: 80円
// cherry: 200円

税込み価格のオブジェクトを作り直す

const withTax = Object.fromEntries(
  Object.entries(prices).map(([item, price]) => [item, Math.round(price * 1.1)])
)
console.log(withTax) // { apple: 110, banana: 88, cherry: 220 }

Object.fromEntries() で [key, value] の配列をオブジェクトに戻せます。

for...in は使わない

for...in はプロトタイプチェーンのプロパティまで列挙してしまうため、オブジェクトのループには向いていません。

// NG：プロトタイプのプロパティまで拾う場合がある
for (const key in user) {
  console.log(key)
}

// OK：Object.keys / Object.entries を使う
Object.keys(user).forEach((key) => {
  console.log(key)
})

まとめ

したいこと	使うもの
キー一覧を取得	`Object.keys(obj)`
値一覧を取得	`Object.values(obj)`
キーと値の両方を使う	`Object.entries(obj)`
エントリ配列をオブジェクトに戻す	`Object.fromEntries(entries)`

配列のループ処理は「JavaScript 配列の繰り返し：forEach・map・for...of の使い分け」も参照してください。