JavaScript

レシピ

オブジェクト

オブジェクトのプロパティを配列形式で取得する

オブジェクトが持つプロパティ名や値を配列形式で取得する方法について解説します。

この記事のポイント

  • オブジェクトのプロパティ名と値を配列形式で取得するメソッドは3種類
  • 配列をオブジェクトに変換するときはfromEntriesメソッドを使う

目次

オブジェクトのプロパティを配列形式で取得する

オブジェクトが持つプロパティ名や値は以下の3つのメソッドを使うと配列形式にして取得することができます。

メソッド名内容
keysメソッドプロパティ名を配列形式で取得
valuesメソッドプロパティの値を配列形式で取得
entriesメソッドプロパティ名と値をセットで配列形式にして取得

以下の例では変数dataに入っているオブジェクトに対してkeysメソッドvaluesメソッドentriesメソッドをそれぞれ使ってプロパティ名と値を配列に取得します。

コード例

// オブジェクトを作成
var data = {
  id: 15001,
  name: 'John',
  job: 'Fisherman',
  contact: {
    'tel': '03-1111-2222',
    'email': 'john@gray-code.com'
  }
}

// プロパティ名を取得
var keys = Object.keys(data);
console.log(keys);
// (4) ["id", "name", "job", "contact"]

// プロパティの値を取得
var values = Object.values(data);
console.log(values);
// (4) [15001, "John", "Fisherman", {tel: "03-1111-2222", email: "john@gray-code.com"}]

// プロパティ名と値を取得
var entities = Object.entries(data);
console.log(entities);
// (4) [Array(2), Array(2), Array(2), Array(2)]
// 0: (2) ["id", 15001]
// 1: (2) ["name", "John"]
// 2: (2) ["job", "Fisherman"]
// 3: (2) ["contact", {tel: "03-1111-2222", email: "john@gray-code.com"}]

プロパティ名のみ取得するときはkeysメソッド、プロパティの値だけを取得するときはvaluesメソッドを使います。
オブジェクトのcontactプロパティにはオブジェクトが入った入れ子状態になっていますが、1つの要素にオブジェクト形式で代入されます。

entriesメソッドはプロパティ名と値の対応を保持したまま、2次元配列の形式で取得します。
必ず先頭にプロパティ名が入り、2つ目に値が入った配列になります。

配列形式のプロパティ名と値をオブジェクトに戻す

entriesメソッドで取得した2次元配列は、fromEntriesメソッドでオブジェクトに変換して戻すことができます。

以下の例ではentriesメソッドで取得した配列を変数entitiesに代入し、その配列をそのままfromEntriesメソッドに渡して新しいオブジェクトを作成します。

コード例

// オブジェクトを作成
var data = {
  id: 15001,
  name: 'John',
  job: 'Fisherman',
  contact: {
    'tel': '03-1111-2222',
    'email': 'john@gray-code.com'
  }
}

// プロパティ名と値を取得
var entities = Object.entries(data);
console.log(entities);
// (4) [Array(2), Array(2), Array(2), Array(2)]
// 0: (2) ["id", 15001]
// 1: (2) ["name", "John"]
// 2: (2) ["job", "Fisherman"]
// 3: (2) ["contact", {tel: "03-1111-2222", email: "john@gray-code.com"}]

// 配列をオブジェクトに変換する
var new_data = Object.fromEntries(entities);
console.log(new_data);
// {id: 15001, name: "John", job: "Fisherman", contact: {tel: "03-1111-2222", email: "john@gray-code.com"}}

プロパティ名、値が対応して入っている2次元配列を用意すれば、オブジェクトを自由に作成することができます。

コード例

var properties = [
  [ "id", "15002"],
  [ "name", "Emilia"],
  [ "job", "Teacher"]
];

var data = Object.fromEntries(properties);
console.log(data);
// {id: "15002", name: "Emilia", job: "Teacher"}

fromEntriesメソッドは2次元配列の決まったフォーマットをオブジェクトに変換しますが、以下のように配列が入れ子になっている場合は配列形式の値がそのまま残ってしまうので注意が必要です。

コード例

var properties = [
  [ "id", "15002"],
  [ "name", "Emilia"],
  [ "job", "Teacher"],
  [ "contact", [
      [	"tel", "080-1111-2222"],
      [ "email", "emilia@gray-code.com"]
    ]
  ]
];

var data = Object.fromEntries(properties);
console.log(data);
// {id: "15002", name: "Emilia", job: "Teacher", contact: Array(2)}

作成したオブジェクトをconsole.logメソッドで出力してみると、contactプロパティの値がオブジェクトに変換されず配列のまま入っていることが分かります。
このような場合はfromEntriesメソッドを2回に分けて実行します。

コード例

var properties = [
  [ "id", "15002"],
  [ "name", "Emilia"],
  [ "job", "Teacher"],
  [ "contact", [
      [	"tel", "080-1111-2222"],
      [ "email", "emilia@gray-code.com"]
    ]
  ]
];

var data = Object.fromEntries(properties);
data.contact = Object.fromEntries(data.contact);

console.log(data);
// {id: "15002", name: "Emilia", job: "Teacher", contact: {tel: "080-1111-2222", email: "emilia@gray-code.com"}}

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。