Ownedmedia ウェブ制作に役立つコンテンツを発信中!

javascript 2019.12.26

javascriptで配列を扱う時によく使うメソッド#9【オブジェクトを配列に変換する】

Tags: ,

これまでの過去記事でも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【配列の値を並び替える・ランダムにシャッフルする】

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?