【JavaScript】オブジェクトのループ処理

for...inループ

for...inループを使用すると、オブジェクトのすべての列挙可能なプロパティを繰り返し処理できます。

const obj = {
    name: 'Alice',
    age: 25,
    city: 'Tokyo'
};

for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
        console.log(`${key}: ${obj[key]}`)
    }
}

• for...inループは、オブジェクトの各キーを反復処理
• Object.hasOwn()メソッドを使用して、オブジェクト自身のプロパティのみを処理

Object.keys()メソッド

Object.keys()メソッドを使用すると、オブジェクトのキーの配列を取得し、それを使って繰り返し処理できます。

const obj = {
    name: 'Bob',
    age: 30,
    city: 'New York'
};

Object.keys(obj).forEach(key => {
    console.log(`${key}: ${obj[key]}`)
})

• Object.keys(obj)は、オブジェクトのキーを配列として返す
• forEachメソッドで各キーに対して処理を行う

Object.entries()メソッド

Object.entries()メソッドを使用すると、オブジェクトのキーと値のペアを配列として取得し、それを使って繰り返し処理できます。

const obj = {
    name: 'Charlie',
    age: 35,
    city: 'San Francisco'
};

Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`)
})

• Object.entries(obj)はオブジェクトのキーと値のペアを含む配列を返す
• 配列の分割代入を使用して、キーと値を簡単に取得できる

for...ofループとObject.entries()

for...ofループを使用して、Object.entries()から得られた配列を繰り返し処理することもできます。

const obj = {
    name: 'Diana',
    age: 28,
    city: 'London'
};

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`)
}

• for...ofループを使用することで、配列の各要素に対して簡潔に処理を行うことができる