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

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

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

以下の例では変数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"}}

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

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