はじめに
連想配列は、ObjectではなくMapを使ったほうが良い(こともある)という記事を読み、積極的に使うことにしました。
参考:
Mapを使うにあたり、「こうしたいときどうするんだっけ？」となった時に参考にできるものが欲しかったので、自分で記事にまとめることにしました。
この記事について
以下について書いています
- Mapのメンバ
- Mapでよく使う操作
以下については書いていません
- そもそも配列とは何か
- Object配列との違い
連想配列とは何か
連想配列とは・・・
添え字にスカラー数値以外のデータ型(文字列型等)も使用できる配列である。
連想配列は、配列の値(value)に名前(key)をつけて管理することができます。
// Arrayだと名前はつけられない
const arrayTestResults = new Array(
77,
91,
82
)
// Mapだと名前をつけられる
const mapTestResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
参考:
配列の宣言
宣言だけする
const map = new Map()
宣言と同時に初期値を設定する
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
メンバ
一覧
| 名称 | 説明 |
|---|---|
| .size | 要素数を取得する |
| .has(key) | keyが一致する要素の有無を真偽値で取得する |
| .get(key) | keyが一致する要素の値を取得する |
| .set(key,value) | keyが一致する要素の値を上書き(または追加)する |
| .delete(key) | keyが一致する要素を削除する |
| .clear() | 全ての要素を削除する |
| .keys() | 全ての要素のkeyを取得する |
| .values() | 全ての要素のvalueを取得する |
| .entries() | 全ての要素のkeyとvalueを取得する |
| .forEach(callback[, thisArg]) | 引数のcallbackに渡した処理をそれぞれの要素に実行する |
.size
要素数を取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
['理科', 55],
['地理', 60],
['歴史', 49],
]);
const size = testResults.size
// 6
*プロパティなのでカッコ()が不要です。
size()ではなくsizeと書きます。
.has(key)
keyが一致する要素の有無を真偽値で取得します
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const hasEnglishResult = testResults.has('英語');
// true
const hasHistoryResult = testResults.has('理科');
// false
.get(key)
keyが一致する要素の値を取得します。
keyが一致する要素がなかった場合はundifinedを取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const englishResult = testResults.get('英語');
// 82
const historyResult = testResults.get('理科');
// undefined
.set(key,value)
keyが一致する要素の値を上書きします。
keyが一致する要素が存在しない場合、新たに要素を追加します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
// 上書き
testResults.set('英語', 100);
// Map {
// '国語' => 77,
// '数学' => 91,
// '英語' => 100,
// }
// 追加
testResults.set('理科', 55);
// Map {
// '国語' => 77,
// '数学' => 91,
// '英語' => 100,
// '理科' => 55,
// }
.delete(key)
keyが一致する要素を削除します。
削除ができたかどうかを有無を真偽値で取得することもできます。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
console.log(testResults.delete('数学'));
// true
// Map {
// '国語' => 77,
// '英語' => 82,
// }
console.log(testResults.delete('理科'));
// false
// Map {
// '国語' => 77,
// '英語' => 82,
// }
.clear()
全ての要素を削除します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
['理科', 55],
['地理', 60],
['歴史', 49],
]);
console.log(testResults.clear());
// Map {}
.keys()
全ての要素のkeyを取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const keys = testResults.keys();
// [Map Iterator] {
// '国語',
// '数学',
// '英語'
// }
*実行結果はシンボルという特殊な型で出力されます。
配列として扱う方法は次章「よく使う操作」で説明します。
.values()
全ての要素のvalueを取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const values = testResults.values();
// [Map Iterator] {
// 77,
// 91,
// 82
// }
*実行結果はシンボルという特殊な型で出力されます。
配列として扱う方法は次章「よく使う操作」で説明します。。
.entries()
全ての要素のkeyとvalueを取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const entries = testResults.entries();
// [Map Entries] {
// ['国語', 77],
// ['数学', 91],
// ['英語', 82]
// }
*実行結果はシンボルという特殊な型で出力されます。
配列として扱う方法は次章「よく使う操作」で説明します。
.forEach(callback[, thisArg])
引数のcallbackに渡した処理を要素それぞれの要素に実行します。
Array.prototype.forEach()と同じような動きをします。
// forEach()
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
testResults.forEach((value, key, map) => {
console.log(value, key, map);
});
// 77 国語 Map { '国語' => 77, '数学' => 91, '英語' => 82 }
// 91 数学 Map { '国語' => 77, '数学' => 91, '英語' => 82 }
// 82 英語 Map { '国語' => 77, '数学' => 91, '英語' => 82 }
よく使う操作
Iteratorを配列として扱う
keys()やvalues()の実行結果はシンボルという特殊な型で出力されます。
配列ではないので、配列用の関数を実行するとエラーになります。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const keys = testResults.keys();
// [Map Iterator] {
// '国語',
// '数学',
// '英語',
// }
keys.forEach((key) => console.log(key));
// TypeError: keys.forEach is not a function
参考:
方法1. Array.from()
配列として値を取得したい場合は、Array.from()を使って変換すればOKです。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const keys = Array.from(testResults.keys());
// [
// '国語',
// '数学',
// '英語'
// ];
keys.forEach((key) => console.log(key));
// 国語
// 数学
// 英語
方法2. 分割代入([...配列])
分割代入[...Map.keys()]を利用して配列にすることも可能です。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
]);
const keys = [...testResults.keys()];
// [
// '国語',
// '数学',
// '英語'
// ];
keys.forEach((key) => console.log(key));
// 国語;
// 数学;
// 英語;
キーでソートする
数値のkeyを数の若い順に並び替えます
const testResults = new Map([
[6, '歴史'],
[1, '国語'],
[4, '理科'],
[5, '地理'],
[2, '数学'],
[3, '英語'],
]);
const sortedTestResults = new Map(
[...testResults.entries()].sort((a, b) => a[0] - b[0])
);
// Map {
// 1 => '国語',
// 2 => '数学',
// 3 => '英語',
// 4 => '理科',
// 5 => '地理',
// 6 => '歴史'
// }
参考:
Stack Overflow -Is it possible to sort a ES6 map object?-
最大値を取得する
値の中で最大の数値を取得します。
const testResults = new Map([
['国語', 77],
['数学', 91],
['英語', 82],
['理科', 55],
['地理', 60],
['歴史', 49],
]);
const maxNum = Math.max(...Array.from(testResults.values()));
// 91
重複する値の数をカウントする
配列内の同じ値の出現回数を要素ごとにカウントします。
const animals = ['いぬ', 'ねこ', 'いぬ', 'ねこ', 'いぬ', 'いぬ'];
const animalCounts = new Map();
for (let animal of animals) {
// 一致するkeyがあればカウントアップ
if (animalCounts.has(animal)) {
const count = animalCounts.get(animal);
animalCounts.set(animal, count + 1);
// 一致するkeyがなければ新たに値をset
} else {
animalCounts.set(animal, 1);
}
}
console.log(animalCounts);
// Map {
// 'いぬ' => 4,
// 'ねこ' => 2,
// }
まとめ
メンバは直感的にわかるものばかりなので覚えやすいのですが、配列への変換操作にはまだ慣れません。。
ネットで調べようとしても、Array.prototype.map()とかObjectの連想配列が混ざっててなかなか目的のものが手に入らないんですよね。
ググラビリティの問題かもですが、、
覚えるまでは、この記事をみながら使おうと思います。