JavaScriptオブジェクトの値を配列に変換する2つの方法

JavaScriptでは、オブジェクトが持つすべてのプロパティの値を取り出し、それらをひとつの配列としてまとめたい場面がよくあります。

例えば、次のようなオブジェクトがあったとします。

{
   "firstName": "John",
   "lastName": "Smith",
   "isAlive": "true",
   "age": "25"
}

このオブジェクトから、以下のような配列を作成することを目標とします。

const myarray = ['John', 'Smith', 'true', '25'];

解決策1:Object.keys()とforループを使用する

まずObject.keys()メソッドでオブジェクトのキー一覧を配列として取得し、続いてforループで各キーに対応する値を新しい配列へ順番に追加していきます。

const obj = {
   "firstName": "John",
   "lastName": "Smith",
   "isAlive": "true",
   "age": "25"
};
const objectToArray = obj => {
   const keys = Object.keys(obj);
   const res = [];
   for(let i = 0; i < keys.length; i++){
      res.push(obj[keys[i]]);
   };
   return res;
};
console.log(objectToArray(obj));

出力

コンソールには以下の出力が表示されます。

[ 'John', 'Smith', 'true', '25' ]

解決策2:Object.values()を使った1行での実装

より簡潔に書きたい場合は、ES2017(ES8)で導入されたObject.values()メソッドが便利です。このメソッドは、オブジェクト自身の列挙可能なプロパティの値を要素とする配列を直接返してくれるため、たった1行で同じ結果を得られます。

const obj = {
   "firstName": "John",
   "lastName": "Smith",
   "isAlive": "true",
   "age": "25"
};
const res = Object.values(obj);
console.log(res);

出力

コンソールには以下の出力が表示されます。

[ 'John', 'Smith', 'true', '25' ]

特別な理由がない限り、Object.values()を使う方法が最もシンプルで推奨されます。ただし、古いブラウザや環境への対応が必要な場合は、解決策1のような従来の手法を採用するとよいでしょう。