JavaScript

最終更新日:
公開日:

レシピ

オブジェクト

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

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

この記事のポイント

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

目次

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

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

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

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

JS コード例

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

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

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

// プロパティ名と値を取得
let 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メソッドに渡して新しいオブジェクトを作成します。

JS コード例

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

// プロパティ名と値を取得
let 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"}]

// 配列をオブジェクトに変換する
let 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次元配列を用意すれば、オブジェクトを自由に作成することができます。

JS コード例

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

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

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

JS コード例

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

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

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

JS コード例

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

let 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"}}