[JavaScript]連想配列のキーと値を一緒にループする(associative array iterate/loop key-value pair)には？

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

連想配列のキー(key)と値(value)をループする方法を紹介します。

Object(オブジェクト)の場合
1. for…of文
2. forEach()
Map(マップ)の場合
1. for…of文
2. forEach()
まとめ

Object(オブジェクト)の場合

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

for…of文

ひとつは、for…of文を使う方法です。

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

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

また、for…of文のループ変数は、２つ記述します。

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

ループ処理では、１つ目のループ変数でキー、２つ目のループ変数で値を取得できます。

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

上記のfor…of文は、対象のObjectのキー(key)と値(value)をループします。

使用例

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

for (let [key, value] of Object.entries(nums)) {
    console.log(key + ":" + value);
}

出力：
one:1
two:2
three:3
four:4
five:5

forEach()

もうひとつは、forEach()を使う方法です。

まず、Object.entries()を呼び出します。

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

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

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

関数の処理に、ループ処理を記述します。
（関数内では、引数の左側でキー、右側で値を取得）

//obj=対象のオブジェクト
Object.entries(obj).forEach(function ([key, value]) {
    //ループ処理
    //「key」でキー、「value」で値を取得
})

上記のforEach()は、対象のObjectのキー(key)と値(value)を一緒にループします。

使用例

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

Object.entries(nums).forEach(function ([key, value]) {
    console.log(key + ":" + value);
})

出力：
one:1
two:2
three:3
four:4
five:5

Map(マップ)の場合

Map(マップ)のキー(key)と値(value)を一緒にループする方法は、２つあります。

for…of文

ひとつは、for…of文を使う方法です。

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

for…of文のループ対象（ofの右辺）に、対象のMapを指定します。

for…of文のループ変数に、「[key, value]」（key=キー、value=値）を指定します。

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

//map=対象のマップ
for (const [key, value] of map) {
    //ループ処理
    //「key」でキー、「value」で値を取得
}

上記のfor…of文は、対象のMap(マップ)のキー(key)と値(value)をループします。

for…of文のループ対象に、Mapから呼び出したentries()を指定しても、同じ結果が得られます。

for (const [key, value] of map.entries()) {
    //ループ処理
}

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

for (const [key, value] of nums) {
    console.log(key + ":" + value);
}

出力：
one:1
two:2
three:3
four:4
five:5

forEach()

もうひとつは、forEach()を使う方法です。

まず、MapからforEach()を呼び出します。

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

そして、関数のブロックに、ループ処理を指定します。

関数では、第１引数で値、第２引数でキーを取得できます。

//map=対象のマップ
map.forEach(function(value, key) {
    //ループ処理
    //「「value」で値、key」でキーを取得
})

上記のforEach()は、対象のMap(マップ)のキー(key)と値(value)をループします。

使用例

const nums = new Map();
nums.set("one", 1);
nums.set("two", 2);
nums.set("three", 3);
nums.set("four", 4);
nums.set("five", 5);

nums.forEach(function(value, key) {
    console.log(key + ":" + value);
})

出力：
one:1
two:2
three:3
four:4
five:5

まとめ

連想配列のキー(key)と値(value)をループするには、Object(オブジェクト)とMap(マップ)の両方ともfor…of文もしくはforEach()を使います。

Object(オブジェクト)の場合
- for…of文を使う方法
  for (let [key, value] of Object.entries(obj)) { /*ループ処理*/ }
- forEach()を使う方法
  Object.entries(obj).forEach(function ([key, value]){ /*ループ処理*/ })
Map(マップ)の場合
- for…of文を使う方法
  for (const [key, value] of map) { /*ループ処理*/ }
- forEach()を使う方法
  map.forEach(function(value, key) {/*ループ処理*/ })