JavaScriptでオブジェクトを反復処理する

概要: このチュートリアルでは、JavaScriptでオブジェクトを反復処理するさまざまな方法を学びます。

for...inループ

for...inループを使用すると、オブジェクトの列挙可能なプロパティを反復処理できます。各反復処理で、オブジェクトキーを取得し、それを使用してプロパティ値にアクセスできます。例えば

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};

for (let key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(`${key} : ${person[key]}`);
    }
}
Code language: JavaScript (javascript)

出力

firstName : John
lastName : Doe
age : 25
ssn : 123-456-2356

このhasOwnProperty()メソッドは、プロパティが継承されたプロパティではなく、personオブジェクトに属していることを確認します。

for...inは、シンボルによってキーが設定されたプロパティを無視することに注意してください。

Object.keys()

Object.keys()はオブジェクトを受け取り、オブジェクトのプロパティの配列を返します。 Object.keys()をforEach()メソッドと連結することにより、オブジェクトのキーと値にアクセスできます。 Object.keys()メソッドはES6で導入されたことに注意してください。例えば

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};

Object.keys(person).forEach(key => {
    console.log(`${key}: ${person[key]}`);
});Code language: JavaScript (javascript)

出力

firstName: John
lastName: Doe
age: 25
ssn: 123-456-2356Code language: HTTP (http)

Object.values()

Object.values()はオブジェクトを引数に取り、オブジェクトの値の配列を返します。 Object.entries()メソッドはES7以降で使用できます。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};

Object.values(person).forEach(value => {
    console.log(`${value}`);
});
Code language: JavaScript (javascript)

出力

John
Doe
25
123-456-2356

Object.entries()

Object.entries()はオブジェクトを受け取り、オブジェクト自身の列挙可能な文字列キーのプロパティ[key, value]ペアの配列を返します。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};

Object.entries(person).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});
Code language: JavaScript (javascript)

出力

firstName: John
lastName: Doe
age: 25
ssn: 123-456-2356    
Code language: HTTP (http)

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()メソッドは、オブジェクトを引数として受け取り、シンボルを使用するもの以外の、列挙不可能なプロパティを含むオブジェクトのキーの配列を返します。

let person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    ssn: '123-456-2356'
};

Object.getOwnPropertyNames(person).forEach(key =>
    console.log(`${key}: ${person[key]}`)
);
Code language: JavaScript (javascript)

出力

firstName: John
lastName: Doe
age: 25
ssn: 123-456-2356Code language: HTTP (http)

このチュートリアルでは、JavaScriptでオブジェクトを反復処理するさまざまな方法を学びました。