初めに
Mapオブジェクトについて学習した内容のoutput用記事です。
※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。
Mapオブジェクトとは
オブジェクトでkeysとvaluesを持っているが、キーの値がobjectやarray、mapなど幅が広い。また、keysとは別にそれぞれのkey,valueのpairには連番が振られる。
使ってみる
itemというmapを生成します。
const item = new Map();
setメソッドを使えば、mapの中身をupdateできます。objectとは違い、数字もkeyとして使えます。
item.set('name', 'Tom');
item.set(1, 'Tokyo, Japan');
setメソッとによって追加されたデータはmapという形になっており、今まで更新されたデータが入っています。
console.log(item.set(2, 'Tennis, Hobby'));
//Map(3) {"name" => "Tom", 1 => "Tokyo, Japan", 2 => "Tennis, Hobby"}
Mapは次のように「.」で繋げ、連続して更新していくこともできます。
item
.set("list", ["Books", "Pencil", "Eraser", "Pen"])
.set("open", 9)
.set("close", 22)
.set(true, "We have")
.set(false, "We dont't have.");
console.log(item);
//Map(8) {"name" => "Tom", 1 => "Tokyo, Japan", 2 => "Tennis, Hobby", "list" => Array(4), "open" => 9, …}
getメソッドを使うと、mapのデータをキーを指定することによって値を取得することができます。
console.log(item.get("name"));
//Tom
console.log(item.get(true));
//We have
mapを使うと次のようにtrueもしくはfalseのキーに該当する値を条件によって取得する値を分けることもできます。
const time = 23;
console.log(
item.get(time > item.get("open") && time < item.get("close"))
);
//We dont't have.
const time = 19;
console.log(
item.get(time > item.get("open") && time < item.get("close"))
);
//We have.
hasメソッドでmapにキーに該当する値が存在するかどうかを調べることができます。
console.log(item.has("list"));
//true
deleteメソッドを使えば、mapの連番に該当する値を削除することができます。
//2 => "Tennis, Hobby"を削除
item.delete(2);
console.log(item);
//Map(7) {"name" => "Tom", 1 => "Tokyo, Japan", "list" => Array(4), "open" => 9, "close" => 22, …}
mapの数を数えるにはsizeメソッドを使います。
console.log(item.size);
//7
また、clearメソッドでmapの値を全部削除できます。
item.clear();
console.log(item);
//Map(0) {}
mapは配列もkeyとして使えます。
item.set([1, 2], "hello");
console.log(item);
//7: {Array(2) => "hello"}
getメソッドで[1,2]をキーとして指定すると、undefinedになってしまいます。
console.log(item.get([1,2]));
//undefined
理由としては配列やオブジェクトはオブジェクト値であり、上記のsetメソッドの[1,2]とgetメソッとでの[1,2]は違う参照先として捉えられるからです。なので、配列を変数に格納してあげる必要があります。
//getメソッドのキーとして使う配列をarr変数に代入する
const arr = [1, 2];
item.set(arr, "hello");
console.log(item.get(arr));
//hello
さらにmapはDOMの要素もキーとして使えます。
//pタグが取得する要素
<body>
<p>Welcome Welcome Welcome</p>
</body>
querySelectorでpタグを取得し、mapのキーとしてセットします。
item.set(document.querySelector("p"), "paragraph");
console.log(item);
//8: {p => "paragraph"}
#参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map