【5分でわかる】EnumをforEachで出力する方法

この記事ではEnumをforEachで出力する方法についてご紹介します。

EnumをforEachで出力する方法

Object.keysを使う方法
Object.valuesを使う場合

EnumのvalueにStringを設定していた場合
Enumを知ってTypeScriptを使いこなそう

EnumをforEachで出力する方法

TypeScriptでEnumの内容をforEachで出力するためには、Object.keys、またはObject.valuesを活用することで実現することが可能です。

TypeScriptのEnumの内容は、各オブジェクトごとにkeyとvalueを持っているためそれを使ってforEachを行います。

例えば以下のようなEnumがあった時の、forEachの実装方法を紹介します。

enum Test {
   A,
   B,
   C,
 }

Object.keysを使う方法

Object.keysに定義したEnumを設定して、filterメソッドを使用すれば、Enum設定されたkeyを配列で取得することが可能です。

今回であれば`[A,B,C]`という形で取得します。

配列で取得さえできれば、あとは配列をforEachで展開する形で書けば実装できますね。

具体的には以下のようになります。

enum Test {
   A,
   B,
   C,
 }

 const keys = Object.keys(Test).filter((v) => isNaN(Number(v)));
 console.log(keys);  // [A,B,C]

 keys.forEach((key, index) => {
   console.log(key);
 });

Object.valuesを使う場合

Enumでは、各キーについてバリューが設定されています。

今回であればA,B,Cといった値に対し、1,2,3というインクリメントされた数値が設定されています。

この数値をObject.valuesで取得し、forEachを実行することが可能です。

enum Test {
   A,
   B,
   C,
 }

 const values = Object.values(Test).filter((v) => !isNaN(Number(v)));
 console.log(values);  // [1,2,3]

 values.forEach((value, index) => {
   console.log(value); 
 });

EnumのvalueにStringを設定していた場合

EnumのvalueにはStringを設定することが可能です。

その場合、取得方法が前述のものよりシンプルになりますので追記しておきます。

こちらも同じくObject.keys、またはObject.valuesを活用することで実現することが可能です。

具体的には以下のように実装します。

enum Test {
   A="a",
   B="b",
   C="c",
 }

 const keys = Object.keys(Test);
 console.log(keys); // [ 'A', 'B', 'C' ]
 keys.forEach((key, index) => {
   console.log(key);
 });

 const values = Object.values(Test);
 console.log(values); // [ 'a', 'b', 'c' ]
 values.forEach((value, index) => {
   console.log(value);
 });