JavaScript Object.values()

概要: このチュートリアルでは、JavaScript の Object.values() メソッドを使用して、オブジェクトの独自の列挙可能なプロパティにアクセスする方法を学習します。

ES2017 より前は、for...in ループと Object.hasOwnProperty()  メソッドを使用して、独自の 列挙可能なプロパティのオブジェクトの値にアクセスしていました。 例：

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25
};

for (const key in person) {
    if (person.hasOwnProperty(key)) {
        const value = person[key];
        console.log(value);

    }
}Code language: JavaScript (javascript)

出力

John
Doe
25

ES2017 では、オブジェクトの独自の列挙可能なプロパティの値の配列を返すことができる Object.values() という新しいメソッドが導入されました。

Object.values() の構文を以下に示します。

Object.values(obj);Code language: JavaScript (javascript)

Object.values() メソッドはオブジェクトを受け取り、その独自の列挙可能なプロパティの値を配列として返します。 次の例を参照してください。

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25
};

const profile = Object.values(person);

console.log(profile);
Code language: JavaScript (javascript)

出力

[ 'John', 'Doe', 25 ]
Code language: JSON / JSON with Comments (json)

Object.values() vs. for…in

Object.values() は独自の列挙可能なプロパティを返すのに対し、for...in ループはプロトタイプチェーンのプロパティを反復処理します。

技術的には、for...in ループを Object.hasOwnProperty() メソッドと共に使用すると、Object.values() と同じ値のセットが得られます。