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

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

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

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

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

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のメソッドで処理を繋げていく(メソッドチェーンする)と、そのまま処理ができます。

まとめ

  1. Object.entries(obj) は、objの[ key, value ]の配列を返してくれる。
  2. 実行結果(返り値)から、メソッドチェーンなどをすると楽に処理が記述できる。
  3. mapメソッドによる加工で、[ { key: value} ] の形に簡単に直せる。

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

参考・引用

1. Object.entries()

2. Object.keys, values, entries

3. Object.entries() を使ってObject → 配列変換

最近の投稿