Object.keys() / values() / entries()

Object.keys()、Object.values()、Object.entries() は、オブジェクトのプロパティを配列として取得するメソッドです。オブジェクトをループ処理したり、データを変換したりする際に欠かせません。

Object.keys()

オブジェクトのキー（プロパティ名）を配列として返します。

const user = { name: "田中", age: 25, city: "東京" };

const keys = Object.keys(user);
console.log(keys); // ["name", "age", "city"]

キーの数を調べたり、特定のキーが存在するか確認したりできます。

console.log(Object.keys(user).length);           // 3
console.log(Object.keys(user).includes("name")); // true

Object.values()

オブジェクトの値を配列として返します。ES2017 で追加されました。

const user = { name: "田中", age: 25, city: "東京" };

const values = Object.values(user);
console.log(values); // ["田中", 25, "東京"]

値の合計を求めるなど、集計処理に便利です。

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

const total = Object.values(scores).reduce((sum, v) => sum + v, 0);
console.log(total); // 245

Object.entries()

オブジェクトのキーと値のペアを、[キー, 値] の配列として返します。ES2017 で追加されました。

const user = { name: "田中", age: 25 };

const entries = Object.entries(user);
console.log(entries);
// [["name", "田中"], ["age", 25]]

for…of と分割代入を組み合わせると、オブジェクトを簡潔にループできます。

const prices = { apple: 100, banana: 80, orange: 120 };

for (const [fruit, price] of Object.entries(prices)) {
  console.log(`${fruit}: ${price}円`);
}
// apple: 100円
// banana: 80円
// orange: 120円

3つのメソッドの比較

メソッド	戻り値	用途
Object.keys()	キーの配列	キー一覧の取得
Object.values()	値の配列	値の集計・変換
Object.entries()	[キー, 値] の配列	ループ・変換処理

列挙順序

これらのメソッドが返す配列の順序は、プロパティの作成順に基づきます。ただし、数値キーは昇順でソートされます。

const obj = { b: 2, 2: "two", a: 1, 1: "one" };

console.log(Object.keys(obj));
// ["1", "2", "b", "a"]（数値キーが先、その後は作成順）

継承されたプロパティ

これらのメソッドは、オブジェクト自身が持つ列挙可能なプロパティのみを返します。プロトタイプチェーンから継承されたプロパティは含まれません。

const parent = { inherited: true };
const child = Object.create(parent);
child.own = "value";

console.log(Object.keys(child)); // ["own"]（inherited は含まれない）

この挙動は for…in ループとは異なります。for…in は継承されたプロパティも列挙するため、意図しない動作を防ぐには Object.keys() などを使う方が安全です。