Object.keys() との違いは？ Object.values() を使いこなしてコードをスッキリ！
Object.values() は、JavaScriptにおける組み込みメソッドの一つで、オブジェクトの列挙可能なプロパティの値を配列として返します。つまり、オブジェクト内の全てのプロパティ値を効率的に抽出できる便利なツールです。
基本的な使用方法
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = Object.values(person);
console.log(values); // ["田中 太郎", 30, "エンジニア"]
上記のように、Object.values() メソッドをオブジェクトに渡すことで、そのオブジェクトの列挙可能なプロパティの値のみを含む配列を取得できます。
Object.values()は、新しい配列を作成します。元のオブジェクトは変更されません。Object.values()は、列挙可能なプロパティのみを返します。非列挙可能なプロパティは、結果に含まれません。Object.values()は、オブジェクトのプロパティのキーではなく、値のみを返します。プロパティのキーを取得したい場合は、Object.keys()メソッドを使用します。
- オブジェクトの値を別のデータ構造に変換したい場合
- オブジェクトの値に基づいてデータをソートしたい場合
- オブジェクトの全てのプロパティ値をループ処理したい場合
- オブジェクトの全てのプロパティ値を確実に取得したい場合は、
for...inループとhasOwnProperty()メソッドを組み合わせる方法も有効です。 Object.values()は、ES6（2015年）で導入された比較的新しいメソッドです。古いブラウザでは、ポリフィルが必要となる場合があります。
例 1：オブジェクトの全てのプロパティ値を配列として取得
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = Object.values(person);
console.log(values); // ["田中 太郎", 30, "エンジニア"]
例 2：オブジェクトの値に基づいてデータをソート
const students = [
{ name: "佐藤 花子", score: 80 },
{ name: "田中 太郎", score: 95 },
{ name: "鈴木次郎", score: 70 }
];
const sortedStudents = students.sort((a, b) => Object.values(a)[1] - Object.values(b)[1]);
console.log(sortedStudents);
// [{ name: "鈴木次郎", score: 70 }, { name: "佐藤 花子", score: 80 }, { name: "田中 太郎", score: 95 }]
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = Object.values(person);
const map = new Map(values.map((value, index) => [index, value]));
console.log(map); // Map { 0: "田中 太郎", 1: 30, 2: "エンジニア" }
これらの例は、Object.values() メソッドがオブジェクトの値を操作する様々なタスクにどのように役立つかを示しています。
for...in ループと hasOwnProperty() メソッド
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = [];
for (const key in person) {
if (person.hasOwnProperty(key)) {
values.push(person[key]);
}
}
console.log(values); // ["田中 太郎", 30, "エンジニア"]
利点
- コードが簡潔に書ける
- 古いブラウザでも動作する
欠点
hasOwnProperty()メソッドの呼び出しが必要- 非列挙可能なプロパティも取得してしまう
Array.from() と Object.keys() メソッド
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = Array.from(Object.keys(person), key => person[key]);
console.log(values); // ["田中 太郎", 30, "エンジニア"]
利点
- 新しい構文で記述できる
- 非列挙可能なプロパティを取得しない
欠点
Array.from()メソッドが古いブラウザではサポートされていない
ES5における Object.keys() メソッドと map() メソッド
const person = {
name: "田中 太郎",
age: 30,
occupation: "エンジニア"
};
const values = Object.keys(person).map(key => person[key]);
console.log(values); // ["田中 太郎", 30, "エンジニア"]
利点
- 非列挙可能なプロパティを取得しない
for...inループよりも簡潔に書ける
欠点
- ES5環境でのみ動作する
ライブラリを使用する
lodashなどのライブラリには、values() メソッドに似た機能を提供するものがあります。これらのライブラリを使用すると、より汎用的で強力な機能を利用できます。
利点
- 非列挙可能なプロパティの処理など、追加機能を提供している
- 多くの場合、
Object.values()よりも高速
欠点
- ライブラリの導入が必要
どの代替方法が最適かは、状況によって異なります。以下の点を考慮して選択してください。
- パフォーマンス
- 機能性
- コードの簡潔性
- ブラウザの互換性