今回は JS ではあまり使われていない、Map のご紹介
JavaScript で連想配列のような、キーと値のペアを覚えさえるとき、
基本的には皆さんオブジェクトを使いますよね？
例えば、以下のような感じで。
const obj = {
hoge: ’fuga’
};
console.log(obj.hoge); // =＞ fuga と出力される
delete obj.hoge // =＞ obj.hoge が削除される
JavaScript ではよく見る形なのですが、
キーと値のペアを作りたいときにはこの方法しか無いと思ってませんか？
実は、あまり知られていませんが、こういったことをするための手段として、
Map というものも存在しているのです！
今日は、そんな Map のご紹介
※ いつもの、とても参考になる MDN のページは先に貼っておきますね。
Map
Map オブジェクトは単純なキー/値写像（マップ）です。
Map ってどうやって使うの？
例えば、先ほどのオブジェクトの例を Map でやると、こんな感じ
const map = new Map(); map.set(’hoge’, ’fuga’); console.log(map.get(’hoge’)); // =＞ fuga と出力される map.delete(’hoge’); // =＞ hoge キーと値のペアが削除される
最初に Map を生成しているところがポイントですね！
map への値の追加は map.set(キー, 値) で、
値を取り出すのは map.get(キー) と、わかりやすい感じです。
delete も、オブジェクトの場合は delete 演算子というあまり見慣れないものを使っていましたが、
こちらでは map に delete メソッドがあるので、それを呼んであげれば良いというわかりやすさです。
Map だと、オブジェクトより何がいいの？
正直オブジェクトで事足りるなら、Map なんて使わなくても良くない？と思ってませんか？
確かにそうなのですが、Map の方が色々な面で「ちょっと便利」なんですよね。
そこを見ていきましょう。
キーの存在確認が簡単
const obj = {
hoge: false
};
if(obj.hoge) {
// 格納されている値が false なので、obj.hoge に値はあるがここは実行されない
console.log(’obj.hoge は値があるよ！’)
}
const map = new Map();
map.set(’hoge’, false);
if(map.has(’hoge’)) {
// どんな値が格納されていてもキーの存在確認には影響しないので、ここは実行される
console.log(’map には hoge があるよ！’)
}
オブジェクトでキーの存在確認をする場合は、格納されている値によって条件式が意図しない挙動をすることがあります。
きちんと書けばこういった問題は回避できますが、よくやる条件判定なので、いちいち考えるのめんどくさいですよね…
一方 Map であれば、has メソッドを使えば格納されている値によらず、キーが存在するかどうかが判定できます。
forEach が簡単に使える
const map = new Map();
map.set(’hoge’, ’hogehoge’);
map.set(’fuga’, ’fugafuga’);
map.set(’piyo’, ’piyopiyo’);
map.forEach(function(v){
console.log(v);
// hogehoge
// fugafuga
// piyopiyo
});
全てのキーを拾っていきたいときに、オブジェクトでは for…in などを使って書くことになります。
書けなくはないのですが、object.keys からキーだけのリストを作って…みたいなことをする必要があるのですね。
またこれも、ぱっと使いたい機能なだけに、毎回考えるのはちょっとメンドウ。
一方、Map を使っておけば、Map に対して forEach をそのまま使えるので、
ストレスフリーで要素を取り出していくことができます。
キーにどんな値でも設定することができる
const key1 = {};
const map = new Map();
map.set(key1, ’hogehoge’);
console.log(map.get(key1)) // =＞ hogehoge
オブジェクトでキーに設定できるのは、文字列か、または Symbol と呼ばれるものだけなのですが、
Map ではどんなものでもキーとして設定できます。
例えば上の例のように、オブジェクトをキーにしてしまうことだってできるのです！
(それがどんなことの役に立つのかは分かりませんが)
機会があれば Map も使ってみてね
ちなみに、Map そのものは、2019/06/17 現在は IE と Edge では使用できないそうです。
Can I use… Support tables for HTML5, CSS3, etc
“Can I use” provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
ブラウザ側で使うときは注意が必要ですね。
今までオブジェクトで作っていた連想配列が、割と簡単に操作できる形で作れる Map。
是非とも使ってみてくださいね。
