(JavaScript) オブジェクトからキーの一覧を取得する方法

(JavaScript) オブジェクトからキーの一覧を取得する方法

 

JavaScriptを書いていて、オブジェクトからキーの一覧を取得したいって言う場面があり、そんな時にちょうど良い方法があったので紹介する。

 

Object.keys()メソッド:オブジェクトからキーの一覧を取得する

結論から言うと、JavaScriptでは、
Object.keys()メソッドを使うことで、オブジェクトからキーの一覧を取得することが可能である。

 

Object.keys()メソッドの使い方

Object.keys()メソッドを使って、オブジェクトからキーの一覧を取得するには、

  • Object.keys()メソッドの引数にオブジェクトを指定する。
  • この時、戻り値は、取得したキーの配列になる。
# Object.keys()メソッドの使い方

var キーの配列 = Object.keys(オブジェクト);

 

Object.keys()メソッドでオブジェクトのキーの一覧を取得するサンプル

では実際にObject.keys()メソッドを使って、
オブジェクトからキーの一覧を取得するサンプルを紹介していく。

以下のようなJavaScriptのオブジェクトがあるとする。

var obj = {
    タピオカ: {
        分類: 'デザート',
        主成分: '糖分'
    },
    牛丼: {
        分類: '和食',
        主成分: '炭水化物'
    },
    ビッグマック: {
        分類: 'ファストフード',
        主成分: '脂質'
    }
};

 

最上位層のキーである、「タピオカ」「牛丼」「ビッグマック」の一覧を、
Object.keys()メソッドを使用して取得するには、以下のようにしてやれば良い。

Object.keys(obj);

 

結果をコンソールに出して確認してみる。Javascriptのオブジェクトから、Object.keys()メソッドでキーの一覧を取得する画像

 

Object.keys()メソッドの結果として、キーの一覧である「タピオカ」「牛丼」「ビッグマック」が、配列として取得できていることが確認できるだろう。

このように、Object.Keys()メソッドを使用すれば、
引数にオブジェクトを指定するだけで簡単にオブジェクトのキーの一覧を取得することが可能だ。

 

また、覚えておいて欲しい点として、
戻り値のキーの一覧は配列のため、キーの一覧を利用してfor文やforeach文を実行すると言ったことも可能だ(実際に筆者はこの方法を多用している)。

 

 

参考:JavaScriptでJsonをオブジェクトとして読み込む方法

参考までに、JavaScriptのオブジェクト関連の記事として、
JavaScriptでJsonをオブジェクトとして読み込み・書き込みする方法を下記の記事にて紹介している。

 

 

JavaScriptでオブジェクトを扱ってこの記事にたどり着いたと言うことは、多分jsonファイルも精通している方、もしくは勉強中の方だと思うので、ぜひ参考までに読んでもらいたい。

 

 

 

 

 

 

 

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。