どうも、ちょげ(@chogetarou)です。
オブジェクト(Object)をループする方法を紹介します。
方法
オブジェクト(Object)をループする方法は、３つあります。
キー(プロパティ)のみをループ
１つ目は、キー(プロパティ)のみをループする方法です。
for…in文
for…in文を使う場合は、まず、for…in文のループ対象（inの右辺）に、対象のオブジェクトを指定します。
そして、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);
}出力：
[LOG]: "one"
[LOG]: "two"
[LOG]: "three"
[LOG]: "four"
[LOG]: "five" forEach()
forEach()を使う場合は、まず、Object.keys()を呼び出し、引数に対象のオブジェクトを指定します。
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);
})出力：
[LOG]: "one"
[LOG]: "two"
[LOG]: "three"
[LOG]: "four"
[LOG]: "five" 値(value)のみをループ
２つ目は、値(value)のみをループする方法です。
for…of文
for…of文を使う場合は、まず、for…of文のループ対象（ofの右辺）に、引数にオブジェクトを指定したObject.values()の結果を指定します。
そして、for…of文にループ処理を指定します。
処理では、ループ変数でオブジェクトの値を取得します。
//obj=対象のオブジェクト
for (let value of Object.values(obj)) {
//ループ処理
//ループ変数「value」で値を取得
}上記のfor文は、オブジェクト(Object)の値(value)のみをループします。
使用例
const nums = {
"one": 1,
"two": 2,
"three": 3,
"four": 4,
"five": 5,
}
for (let value of Object.values(nums)) {
console.log(value);
}出力：
[LOG]: 1
[LOG]: 2
[LOG]: 3
[LOG]: 4
[LOG]: 5 forEach()
forEach()を使う場合は、まず、Object.values()を呼び出し、Object.values()の引数にオブジェクトを指定します。
Object.values()からforEach()を呼び出します。
そして、forEach()の引数に、１つの引数を持つ関数を指定します。
関数のブロックにループ処理を指定します。
（関数の引数で、オブジェクトの値を取得）
//obj=対象のオブジェクト
Object.values(obj).forEach(function(value) {
//ループ処理
//引数「value」で値を取得
});上記のforEach()は、オブジェクト(Object)の値(value)のみをループします。
使用例
const nums = {
"one": 1,
"two": 2,
"three": 3,
"four": 4,
"five": 5,
}
Object.values(nums).forEach(function(value) {
console.log(value);
});出力：
[LOG]: 1
[LOG]: 2
[LOG]: 3
[LOG]: 4
[LOG]: 5 キーと値を一緒にループ
３つ目は、キーと値を一緒にループする方法です。
for…of文
for…of文を使う場合は、まず、for…of文のループ対象（ofの右辺）に、引数にオブジェクトを指定したObject.entries()の結果を指定します。
また、for文のループ変数を、[]内にカンマ区切りで２つ指定します。
そして、for…of文にループ処理を指定します。
処理では、ループ変数の左側でキー、右側で値を取得します。
//obj=対象のオブジェクト
for (let [key, value] of Object.entries(obj)) {
//ループ処理
//ループ変数の「key」でキー, 「value」で値を取得
}上記のfor文は、オブジェクト(Object)のキーと値を一緒にループします。
使用例
const nums = {
"one": 1,
"two": 2,
"three": 3,
"four": 4,
"five": 5,
}
for (let [key, value] of Object.entries(nums)) {
console.log(key + "=" + value);
}出力：
[LOG]: "one=1"
[LOG]: "two=2"
[LOG]: "three=3"
[LOG]: "four=4"
[LOG]: "five=5" forEach()
for…of文を使う場合は、まず、Object.entries()を呼び出し、Object.entries()の引数にオブジェクトを指定します。
Object.entries()からforEach()を呼び出します。
forEach()の引数に、２つの要素を持つ配列を引数に指定した関数を指定します。
関数のブロックにループ処理を指定します。
（引数の左の要素でキー、引数の右の要素で値を取得）
//obj=対象のオブジェクト
Object.entries(obj).forEach(function([key, value]) {
//ループ処理
//「key」でキー, 「value」で値を取得
});上記のforEach()は、オブジェクト(Object)のキーと値を一緒にループします。
使用例
const nums = {
"one": 1,
"two": 2,
"three": 3,
"four": 4,
"five": 5,
}
Object.entries(nums).forEach(function([key, value]) {
console.log(key + "=" + value);
});出力：
[LOG]: "one=1"
[LOG]: "two=2"
[LOG]: "three=3"
[LOG]: "four=4"
[LOG]: "five=5" まとめ
オブジェクト(Object)をループする方法は、次の３つです。
- キー（プロパティ）のみをループする方法
- for…in文を使う場合
for (let key in obj) { ループ処理 } - forEach()を使う場合
Object.keys(obj).forEach(function(key) { ループ処理 })
- for…in文を使う場合
- 値のみをループする方法
- for…of文を使う場合
for (let value of Object.values(obj)) { ループ処理 } - forEach()を使う場合
Object.values(obj).forEach(function(value) { ループ処理 })
- for…of文を使う場合
- キーと値のみをループする方法
- for…of文を使う場合
for (let [key, value] of Object.entries(obj)) { ループ処理 } - forEach()を使う場合
Object.entries(obj).forEach(function([key, value]) { ループ処理 })
- for…of文を使う場合
コメント