JavaScriptでオブジェクトのキーと値を配列として取得する方法

概要

リテラル値をマッピングしたオブジェクトを受け取り、そのキーと値を抽出して二次元配列として返すJavaScript関数を作成する方法を解説します。

作成する関数は「配列の中に配列が入った構造（二次元配列）」を返し、各サブ配列は必ず2つの要素を持つ必要があります。1つ目の要素にはオブジェクトの各ペアにおけるキー、2つ目の要素にはそれに対応する値を格納します。

コード例

const obj = {
  name: 'Nick',
  achievements: 158,
  points: 14730
};
const retrieveProperties = (obj = {}) => {
  const res = [];
  for(const key in obj){
    res.push([key, obj[key]]);
  };
  return res;
};
console.log(retrieveProperties(obj));

出力結果

コンソールへの出力は以下のようになります。

[ [ 'name', 'Nick' ], [ 'achievements', 158 ], [ 'points', 14730 ] ]

処理の流れ

この関数の動作を順番に確認してみましょう。

1. for...inループを使って、オブジェクト内のすべてのキーを1つずつ取り出します。
2. 各反復処理で、[key, obj[key]]という形式の新しいサブ配列を作成します。keyはプロパティ名、obj[key]はそのプロパティに対応する値です。
3. push()メソッドで、作成したサブ配列を結果格納用の配列resへ追加していきます。
4. すべてのキーの処理が完了したら、完成した二次元配列を返します。

なお、ループ変数はconstで宣言するのがベストプラクティスです。宣言なしでfor(key in obj)と書くと暗黙的なグローバル変数が生成され、意図しないバグの原因になることがあります。

よりモダンな方法：Object.entries()を使う

ES2017以降では、組み込みメソッドのObject.entries()を使えば、同じ結果をたった1行で得ることができます。

const obj = {
  name: 'Nick',
  achievements: 158,
  points: 14730
};

const result = Object.entries(obj);
console.log(result);
// [ [ 'name', 'Nick' ], [ 'achievements', 158 ], [ 'points', 14730 ] ]

Object.entries()は、オブジェクト自身の列挙可能なプロパティを[キー, 値]というペアの配列にまとめて返すため、自前でループを書く必要がありません。可読性・保守性の面でも優れており、古いブラウザ環境をサポートする必要がない限り、こちらの方法が推奨されます。