【JavaScript入門】Object.entries()でObjectから配列を作成する

どうもフロントエンドエンジニアのまさぴょんです！

前回は、JavaScriptのObject操作メソッド、keys() と values() について解説しました。

今回は、その2つのObject操作メソッドを合わせたようなメソッドであるObject.entries()について、解説していきます。

【JavaScript入門】Object.keysとObject.valuesでObjectから配列を作成する

【JavaScriptのObject操作: keys&values編】

1 Object.entries() の構文
2 Object.entries() サンプルコード
3 まとめ
4 JavaScript書籍 Ver. 中級-上級者向け
5 JavaScript書籍 Ver. 初級者向け
6 参考・引用
7 最近の投稿

Object.entries() の構文

Object.entriesメソッドの基本の形を確認しましょう！

Object.entries()・基本の形

const momo = { name: "もも", type: "Cat", age: 5};

const momoArray = Object.entries(momo);

console.log(JSON.stringify(momoArray));  // データ構造がわかりやすくなるようにJSON文字列化してconsole出力する。

//  < 実行結果 >
// [  ['name', 'もも'],  ['type', 'Cat'],   ['age', 5] ]

実行結果は、該当Objectのkey & valueを [ key, value ]の配列にして、配列の中に格納しています。

Object.keys() と Object.values() と同じく、実行結果（返り値）が配列なので、メソッドチェーンをして配列加工ができます。

Object.entries() サンプルコード

const cartItem = {
  mikan: 1,
  orange: 2,
  meat: 4,
  apple: 3,
  grape: 3,
  okasi: 12,
  redbul: 12
};


const cartItemList = Object.entries(cartItem).map(([key, value])=> ({key, value}));
// [key, value]で分割代入によるParameter(引数)受け取り。
// {key, value} = { key: key, value: value } の省略形

// データ構造がわかりやすくなるようにJSON文字列化してconsole出力する。
console.log(JSON.stringify(cartItemList)); 
// 出力結果
// [{"key":"mikan","value":1},{"key":"orange","value":2},
// {"key":"meat","value":4},{"key":"apple","value":3},
// "key":"grape","value":3},{"key":"okasi","value":12},{"key":"redbul","value":12}]


const cartItemKeyNameList = Object.entries(cartItem).map(([key, value])=> ( { [key]: value } )); 
// key名(ブラケット記法)にvalueを紐づける

// データ構造がわかりやすくなるようにJSON文字列化してconsole出力する。
console.log(JSON.stringify(cartItemKeyNameList));
// 出力結果: [{"mikan":1},{"orange":2},{"meat":4},{"apple":3},{"grape":3},{"okasi":12},{"redbul":12}]

上記の2つのサンプルコードのようにObjectからArrayの構造に形を変換してから、Array.prototypeのメソッドで処理を繋げていく(メソッドチェーンする)と、そのまま処理ができます。