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