これまでの過去記事でもJavaScriptでの配列操作のメソッドをまとめてきましたが、今回は扱うデータがオブジェクトの場合に使えるメソッドになります。APIなどからJSON形式でデータを取得する場合には、配列ではなくオブジェクトの形になっている場合もあります。その際に配列へ使うメソッドを実行してもエラーとなってしまうため、オブジェクトを配列の形へと変換してあげる必要があります。  

Object.keys()

オブジェクトから、keyの値だけを配列として切り出せるのが「Object.keys()」です。定義されたオブジェクトをObject.keys()メソッドの引数に指定すると、返り値でkeyの値の配列となり返ってきます。つまり、オブジェクトからkeyの値で配列に変換することができます。 【javascript】

const objectData = {
 1: 'ロケット',
 2: '飛行機',
 3: '電車', 
 4: '自動車' 
}
console.log( Object.keys( objectData ) );

  このようにコンソールで確認すると、key: valueの値のうち、keyの部分が切り出されているのが確認できます。 【console】

[ "1", "2", "3", "4" ]

   

Object.values()

先ほどと同じ要領で、続いてはvalueの値を配列として切り出すことができるのが「Object.values()」です。こちらもメソッドの引数に対象となるオブジェクトを指定します。その名の通り、オブジェクトのvalueの値が抽出された配列が返ってきます。なので、オブジェクトからvalueの値で配列に変換することができます。 【javascript】

const objectData = {
 1: 'ロケット',
 2: '飛行機',
 3: '電車', 
 4: '自動車' 
}
console.log( Object.values( objectData ) );

  同じくコンソールで確認すると、key: valueの値のうち、valueの部分が切り出されているのが確認できます。こちらの方がオブジェクトから配列に変換する際によく使われるのではないでしょうか。 【console】

[ "ロケット", "飛行機", "電車", "自動車" ]

   

Object.entries()

最後の「Object.entries()」を使うと、オブジェクトのkeyとvalueの両方の値が含まれた配列として切り出すことができます。使う場合も同じくメソッドの引数に対象となるオブジェクトを指定します。返り値では、keyとvalueがセットになった配列として返ってきます。 【javascript】

const objectData = {
 1: 'ロケット',
 2: '飛行機',
 3: '電車', 
 4: '自動車' 
}
console.log( Object.values( objectData ) );

  コンソールで確認すると、このようにkeyとvalue両方が配列となっているのが確認できます。 【console】

[
 ["1", "ロケット"], ["2", "飛行機"], ["3", "電車"], ["4", "自動車"] 
]

   

まとめ

【オブジェクトからkeyの値で配列に変換する】 Object.keys( object );   【オブジェクトからvalueの値で配列に変換する】 Object.values( object );   【オブジェクトからkeyとvalueの値で配列に変換する】 Object.entries( object );   今回はオブジェクトの型を持つ値を配列に変換するメソッドについてまとめてみました。APIでデータを取得するなどの場合には配列だけでなくオブジェクトのデータを扱うケースも多々あります。そんな時には、このようなメソッドでオブジェクトから配列に変換する方法が必要になるので、ぜひ覚えておきたいですね。   （こちらの記事もどうぞ） JavaScriptで配列を扱う時によく使うメソッド＃1【配列の作成・値や総数の取得・空判定など】 JavaScriptで配列を扱う時によく使うメソッド＃2【配列の値に対して繰り返し処理を行う】 JavaScriptで配列を扱う時によく使うメソッド＃3【配列に値が含まれるか・値のインデックスを検索する】 JavaScriptで配列を扱う時によく使うメソッド＃4【配列から条件に合う値を取得・フィルタリングする】 JavaScriptで配列を扱う時によく使うメソッド＃5【配列の値から別の配列を作成・単一の値を算出する】 JavaScriptで配列を扱う時によく使うメソッド＃6【配列の値を追加・削除する】 JavaScriptで配列を扱う時によく使うメソッド＃7【配列の値を切り取る・値を差し替える・配列を合体する】 JavaScriptで配列を扱う時によく使うメソッド＃8【配列の値を並び替える・ランダムにシャッフルする】