[TypeScript]Map(マップ)を配列(array)に変換するには?

TypeScript

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

Map(マップ)を配列(array)に変換する方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

Map(マップ)を配列(array)に変換する方法は、3つあります。

key-valueペアの配列

1つ目は、key-valueペアの配列に変換する方法です。

Mapをkey-valueペアの配列に変換するには、スプレッド構文もしくはArray.from()を使います。

スプレッド構文

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

そして、「...」の右辺で、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()の引数で、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]]

keyの配列

2つ目は、keyの配列に変換する方法です。

Mapをkeyの配列に変換するには、スプレッド構文もしくはArray.from()を使います。

スプレッド構文

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

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

//T=キーの型、map=マップ
const keys: T[] = [...map.keys()]

上記のスプレッド構文は、keys()を呼び出したMapから全てのキーを配列として取得します。

使用例

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 keys: string[] = [...nums.keys()]

console.log(keys)
出力:
["one", "two", "three", "four", "five"]

Array.from()

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

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

//T=キーの型、map=マップ
const keys: T[] = Array.from(map.keys())

上記のArray.from()は、keys()を呼び出したMapから全てのキーを配列として取得します。

使用例

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 keys: string[] = Array.from(nums.keys())

console.log(keys)
出力:
["one", "two", "three", "four", "five"]

valueの配列

3つ目は、valueの配列に変換する方法です。

Mapをkeyの配列に変換するには、スプレッド構文もしくはArray.from()を使います。

スプレッド構文

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

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

//T=値の型、map=マップ
const values: T[] = [...map.values()]

上記のスプレッド構文は、values()を呼び出したMapから全ての値(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 values: number[] = [...nums.values()]

console.log(values)
出力:
[1, 2, 3, 4, 5]

Array.from()

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

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

//T=値の型、map=マップ
const values: T[] = Array.from(map.values())

上記のArray.from()は、values()を呼び出したMapから全ての値(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 values: number[] = Array.from(nums.values())

console.log(values)
出力:
[1, 2, 3, 4, 5]
スポンサーリンク

まとめ

Map(マップ)を配列(array)に変換する方法は、次の3つです。

  • key-valueペアの配列に変換する方法
    • const pairs: [TKey, TValue][] = [...map.entries()]
    • const pairs: [TKey, TValue][] = Array.from(map.entries())
  • keyの配列に変換する方法
    • const keys: T[] = [...map.keys()]
    • const keys: T[] = Array.from(map.keys())
  • valueの配列に変換する方法
    • const values: T[] = [...map.values()]
    • const values: T[] = Array.from(map.values())

コメント

タイトルとURLをコピーしました