オブジェクトの値列挙(Object.values)の基本と実践
Object.values(obj) は「オブジェクトの 値だけ を配列にして返す」便利な関数です。キーは不要で値だけを処理したいときに最短ルートになります。
基本の構文
const values = Object.values(obj);
JavaScript- 返すもの: 自身の列挙可能なプロパティの「値」一覧(配列)
- 含まれないもの: Symbolキーや非列挙プロパティの値、プロトタイプ由来の値
- 順序: Object.keys と同じルール(数値っぽいキーが先、その後は作成順)
すぐ使えるテンプレート集
1) 基本:値一覧を取得
const user = { name: "Aki", age: 22 };
console.log(Object.values(user)); // ["Aki", 22]
JavaScript2) 配列のように扱う(合計や平均)
const scores = { math: 80, english: 90, science: 70 };
const values = Object.values(scores);
const sum = values.reduce((a, b) => a + b, 0);
const avg = sum / values.length;
console.log(sum, avg); // 240 80
JavaScript- ポイント: 値だけを取り出して数値計算に使える。
3) 値一覧を文字列に整形
const settings = { theme: "dark", pageSize: 20, compact: true };
console.log(Object.values(settings).join(", "));
// "dark, 20, true"
JavaScript- ポイント: 表示用にまとめたいときに便利。
4) 配列のようにループ処理
const config = { host: "localhost", port: 3000 };
for (const v of Object.values(config)) {
console.log(v);
}
// "localhost"
// 3000
JavaScript- ポイント: for…of で値だけを順番に処理できる。
5) entriesと組み合わせてキーと値を同時に
const obj = { id: 1, name: "Mao" };
console.log(Object.entries(obj));
// [["id",1],["name","Mao"]]
JavaScript- ポイント: 値だけなら values、キーだけなら keys、両方なら entries。
実務で便利なパターン
値のバリデーション(全部が数値か確認)
const data = { a: 1, b: 2, c: "x" };
const allNumbers = Object.values(data).every(v => typeof v === "number");
console.log(allNumbers); // false
JavaScript値のフィルタリング(条件に合うものだけ)
const users = { u1: "Aki", u2: "Mao", u3: "Ren" };
const filtered = Object.values(users).filter(name => name.startsWith("A"));
console.log(filtered); // ["Aki"]
JavaScript配列風オブジェクトから値を取り出す
const arrLike = { 0: "red", 1: "blue", length: 2 };
console.log(Object.values(arrLike)); // ["red","blue",2]
JavaScript- ポイント: lengthもプロパティなので値に含まれる。
よくある落とし穴と対策
- 非列挙プロパティは出ない: definePropertyで enumerable: false にしたものは含まれない。
→ 必要なら Object.getOwnPropertyNames を使う。 - Symbolキーの値は出ない: Object.valuesは文字列キーのみ。
→ Symbol値が欲しいなら Object.getOwnPropertySymbols。 - 順序に依存しない設計に: 数値キーが先に並ぶルールがあるが、表示順を保証したいなら自分で並べ替える。
- Mapと混同しない: Map.values() は順序保証あり。オブジェクトは順序保証が弱いので用途に応じて選ぶ。
練習問題(手を動かして覚える)
- 値一覧を出力
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1,2,3]
JavaScript- 合計を計算
const scores = { math: 80, english: 90, science: 70 };
const total = Object.values(scores).reduce((a,b)=>a+b,0);
console.log(total); // 240
JavaScript- 文字列値だけを抽出
const data = { id: 1, name: "Ren", active: true };
console.log(Object.values(data).filter(v => typeof v === "string"));
// ["Ren"]
JavaScript直感的な指針
- 値だけ欲しい: Object.values。
- キーも欲しい: Object.keys。
- 両方欲しい: Object.entries。
- 順序に依存しない: 並べ替えは自分で。
👉 Object.values は「オブジェクトを配列化して処理する」入り口。計算・フィルタ・表示に直結するので、初心者が「オブジェクトを配列っぽく扱う」第一歩に最適です。
