[TypeScript]Map(マップ)をkey-valueペアの配列に変換するには？

どうも、ちょげ(@chogetarou)です。

Map(マップ)をkey-valueペアの配列(array)に変換する方法を紹介します。

方法

Map(マップ)をkey-valueペアの配列(array)に変換する方法は、２つあります。

スプレッド構文

１つは、スプレッド構文を使う方法です。

まず、[...]を記述します。

そして、「...」の右辺で、Mapからentries()を呼び出します。

////TKey=キーの型、TValue=値の型、map=マップ
const pairs: [TKey, TValue][] = [...map.entries()]

上記のスプレッド構文は、entries()を呼び出したMapをkey-valueペアの配列に変換します。

使用例

const nums: Map<string, number> = new Map();
nums.set("one", 1)
nums.set("two", 2)
nums.set("three", 3)
nums.set("four", 4)
nums.set("five", 5)

const pairs: [string, number][] = [...nums.entries()]

console.log(pairs)

出力：
[["one", 1], ["two", 2], ["three", 3], ["four", 4], ["five", 5]] 

Array.from()

もう１つは、Array.from()を使う方法です。

まず、Array.from()を呼び出します。

そして、Array.from()の引数で、Mapからentries()を呼び出します。

////TKey=キーの型、TValue=値の型、map=マップ
const pairs: [TKey, TValue][] = Array.from(map.entries())

上記のArray.from()は、entries()を呼び出したMapをkey-valueペアの配列に変換します。

使用例

const nums: Map<string, number> = new Map();
nums.set("one", 1)
nums.set("two", 2)
nums.set("three", 3)
nums.set("four", 4)
nums.set("five", 5)

const pairs: [string, number][] = Array.from(nums.entries())

console.log(pairs)

出力：
[["one", 1], ["two", 2], ["three", 3], ["four", 4], ["five", 5]] 

まとめ

Map(マップ)をkey-valueペアの配列(array)に変換する方法は、次の２つです。

• スプレッド構文を使う方法
  const pairs: [TKey, TValue][] = [...map.entries()]
• Array.from()を使う方法
  const pairs: [TKey, TValue][] = Array.from(map.entries())

[TypeScript]配列(Array)の最後の要素を削除するには？

配列(Array)の末尾の要素を削除する方法を紹介します。

www.choge-blog.com

2022.09.01

[TypeScript]slice()で文字列の先頭の文字を取得するには？

slice()を使って文字列(string)の最初の文字を取得する方法を紹介します。

www.choge-blog.com

2022.09.01

[TypeScript]配列(Array)の末尾に要素を追加するには？

配列(Array)の最後に要素を追加する方法を紹介します。

www.choge-blog.com

2022.08.31