Mapのkey()とvalues()について

に公開

久々の更新になります!

さて、今回はMapについて少し掘り下げていきます。

Mapの値取得


Mapの値取得の前にオブジェクトのついての少し触れておきます。
objectでは値の取得を行いたい場合

const fruits = {
  En: "apple",
  Ja: "りんご"
};

console.log(fruits.En);  // apple
console.log(fruits.Ja);  // りんご

と取得できます。

そしてmapではどのように値の取得をするかといいますと以下のようになります。

const fruits = new Map<string, string>([
  ["En", "apple"],
  ["Ja", "りんご"]
]);

console.log(fruits.get("En"))  // apple
console.log(fruits.get("Ja"))  // りんご


keysとvaluesについて

ではkeyの配列を取得する場合はどうでしょうか?

オブジェクトの場合は、

// keyの型定義
type Lang = "En" | "Ja";

const fruits2: { [key in Lang]: string } = {
  En: "apple",
  Ja: "りんご"
}  

const keys = Object.keys(fruits)
console.log(keys) // ["En", "Ja"]

といった具合で取得することが可能です。

そしてmapの場合は、

// keyの型定義
type Lang = "En" | "Ja";

const fruits = new Map<Lang, string>([
  ["En", "apple"],
  ["Ja", "りんご"]
]);

const keys = Array.from(fruits.keys()) 
console.log(keys) // ["En", "Ja"]

といったようにArray.fromと合わせて使用することで取得できます。

また以下のように[...]と合わせても取得可能です。

const keys = [...fruits.keys())];

console.log(keys) // ["En", "Ja"]


以下のようにkeysのみでは取得はできません。

// これでは取得不可能
const keys = fruits.keys()


同様にvaluesについても紹介すると

const values = Array.from(fruits.values())

console.log(values) // ["apple", "りんご"]


もしくは

const values = [...fruits.values()];

console.log(values) // ["apple", "りんご"]

で取得することが可能になります。