[JavaScript]オブジェクト(Object)のキー(key)をループするには？

どうも、ちょげ(@chogetarou)です。

オブジェクト(Object)のプロパティをループする方法を紹介します。

方法

オブジェクト(Object)のキー(key)をループする方法は、３つあります。

for…in文

１つ目は、for…in文を使う方法です。

まず、for…in文を記述します。

for…in文のループ対象（ofの右辺）に、対象のオブジェクトを指定します。

そして、for…in文のループ処理を記述します。

ループ処理では、ループ変数でオブジェクトのキーを取得できます。

//obj=対象のオブジェクト
for (let key in obj) {
    //ループ処理
    //変数「key」でキーを取得
}

上記のfor…in文は、対象のObjectのキーをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

for (let key in nums) {
    console.log(key);
}

出力：
one
two
three
four
five

for…of文

２つ目は、for…of文を使う方法です。

まず、for…of文を記述します。

for…of文のループ対象（ofの右辺）に、対象のオブジェクトを引数に指定したObject.keys()を指定します。

そして、for…of文のループ処理を記述します。

ループ処理では、ループ変数でオブジェクトのキーを取得できます。

//obj=対象のオブジェクト
for (let key of Object.keys(obj)) {
    //ループ処理
    //変数「key」でキーを取得
}

上記のfor…of文は、対象のObjectのキーをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

for (let key of Object.keys(nums)) {
    console.log(key);
}

出力：
one
two
three
four
five

forEach()

３つ目は、forEach()を使う方法です。

Object.keys()の引数に、対象のオブジェクトを指定します。

次に、Object.keys()からforEach()を呼び出します。

forEach()の引数に、１つの引数を持つ関数を指定します。

関数の処理に、ループ処理を指定します。
（関数の引数で、オブジェクトのキーを取得）

//obj=対象のオブジェクト
Object.keys(obj).forEach(function(key) {
    //ループ処理
    //引数「key」でキーを取得
})

上記のforEach()は、対象のObjectのキーをループします。

使用例

const nums = { 
    "one": 1, 
    "two": 2,
    "three": 3,
    "four": 4,
    "five": 5,
}

Object.keys(nums).forEach(function(key) {
    console.log(key);
})

出力：
one
two
three
four
five

まとめ

オブジェクト(Object)のキー(key)をループする方法は、次の３つです。

• for…in文を使う方法
  for (let key in obj) { /*ループ処理*/ }
• for…of文を使う方法
  for (let key of Object.keys(obj)) { /*ループ処理*/ }
• forEach()を使う方法
  Object.keys(obj).forEach(function(key) { /*ループ処理*/ })