javascript オブジェクトをループさせてkey・valueを全て取得する

作成日 2022.07.31
更新日 2022.12.14
javascript
javascript

javascriptで、オブジェクトをループさせてkey・valueを全て取得するサンプルコードを記述してます。6つの方法から取得することが可能です。

1. 環境
2. オブジェクトのループ
3. 注意点
4. 外部ライブラリを使用
5. パフォーマンス

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 108.0.5359.99

Javascript サンプル集はこちら

オブジェクトのループ

オブジェクトをループさせてkey・valueを全て取得するには、以下の6つ方法が存在します。
※見やすいようにアロー関数で記述してます。

アロー関数の使い方

const obj = {
    "a": 1,
    "b": 2,
    "c": 3
}

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

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

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

for (let key in obj) { console.log(`key : ${key} value : ${obj[key]}`) }

for (let key of Object.keys(obj)) { console.log(`key : ${key} value : ${obj[key]}`) }

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

実行結果を見ると、key・valueが全て取得されていることが確認できます。
※全て同じ以下の結果となります。

注意点

「for-in」のみ、プロトタイプを遡って取得されるため、以下のオブジェクトの場合は結果がことなります。

const obj = {
    "a": 1,
    "b": 2,
    "c": 3
}

let obj2 = {
    "d": 4
}

// Prototypeを追加
obj.__proto__ = obj2;


console.log('【for-in】')
for (let key in obj) { console.log(`key : ${key} value : ${obj[key]}`) }

console.log('【他の方法】')
Object.keys(obj).forEach( (key) => console.log(`key : ${key} value : ${obj[key]}`));

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

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

for (let key of Object.keys(obj)) { console.log(`key : ${key} value : ${obj[key]}`) }

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

実行結果

他の方法と同じようにするには、prototypeチェーンをさかのぼらないように「hasOwnProperty」で判定してから使用します。

for (let key in obj) { if (obj.hasOwnProperty(key)) { console.log(`key : ${key} value : ${obj[key]}`) } }

外部ライブラリを使用

「jQuery」や「underscore」、「lodash」を使用して取得することも可能です。

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.4/underscore-umd-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

const obj = {
    "a": 1,
    "b": 2,
    "c": 3
}

let obj2 = {
    "d": 4
}

// Prototypeを追加
obj.__proto__ = obj2;

console.log('jQuery')

$.each(obj, (key, value) => { console.log(`key : ${key} value : ${value}`)})

console.log('underscore')

_.each(obj, (value, key) => console.log(`key : ${key} value : ${value}`))

console.log('lodash')

_.forIn(obj, (value, key) => { console.log(`key : ${key} value : ${value}`)})

実行結果

「jQuery」と「lodash」の場合は、プロトタイプを遡って取得されるため「for-in」と同様に「hasOwnProperty」を使用します。

$.each(obj, (key, value) => { if (obj.hasOwnProperty(key)) { console.log(`key : ${key} value : ${value}`)}})

_.forIn(obj, (value, key) => { if (obj.hasOwnProperty(key)) { console.log(`key : ${key} value : ${value}`)}})