Object.entries()とは？「使い方」などをわかりやすく解説！

この記事ではJavaScriptの『Object.entries()』について、

• Object.entries()メソッドとは
• Object.entries()メソッドの構文
• Object.entries()メソッドの使い方
• Object.entries()メソッドの注意点

などを分かりやすく説明するように心掛けています。ご参考になれば幸いです。

Object.entries()メソッドとは

Object.entries()メソッドは、引数に与えたオブジェクトの各プロパティを[key, value]のペアの配列で返すメソッドです。

例えば、以下のオブジェクトがあるとします。

{
  key01: 'value01',
  key02: 'value02',
};

このオブジェクトに対して、Object.entries()メソッドを用いると、以下の配列に変換されます(後ほどサンプルコードで下記の配列に変換する方法を説明します)。

[
  ['key01', 'value01'],
  ['key02', 'value02'],
];

Object.entries()メソッドの構文

Object.entries()メソッドの構文を以下に示します。

Object.entries(obj)

Object.entries()メソッドの使い方

Object.entries()メソッドについて、以下に示している様々な使い方をこれから説明します。

• Object.entries()メソッドのみ使う方法
• Object.entries()メソッドとfor...ofやforEach()を使ってオブジェクトをループ処理する方法
• Object.entries()メソッドとmap()メソッドを使ってオブジェクトを変換する方法
• Object.entries()メソッドを使って通常のオブジェクトをMapオブジェクトへ変換する方法

各使い方について順番に説明します。

Object.entries()メソッドのみ使う方法

Object.entries()メソッドの使い方は非常にシンプルです。

Object.entries()メソッドの引数にオブジェクトを渡すと、オブジェクトの各プロパティを[key, value]のペアの配列として取得することができます。サンプルコードを以下に示します。

const obj = {
  key01: 'value01',
  key02: 'value02',
};
const arr = Object.entries(obj);
console.log(arr);
// ログ出力
// [
//   ['key01', 'value01'],
//   ['key02', 'value02'],
// ]

Object.entries()メソッドとfor...ofやforEach()を使ってオブジェクトをループ処理する方法

Object.entries()メソッドはイテレーション(繰り返し)の処理に非常に便利であり、for...ofやforEach()メソッドなどと組み合わせて使用するとオブジェクトを簡単に反復処理することができます。以下のサンプルコードを見てみましょう。

const obj = {
  key01: 'value01',
  key02: 'value02',
};

// for...ofを用いる場合
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}:${value}`);
}
// ログ出力
// key01:value01
// key02:value02

// forEachを用いる場合
Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}:${value}`);
});
// ログ出力
// key01:value01
// key02:value02

上記のコードでは、配列の分割代入を用いて、変数keyと変数valueに値を代入しています。

Object.entries()メソッドとmap()メソッドを使ってオブジェクトを変換する方法

Object.entries()メソッドとmap()メソッドを使用すると、オブジェクトを様々な形に変換することができます。

例えば、以下のオブジェクトがあるとします。

{
  key01: 'value01',
  key02: 'value02',
};

このオブジェクトに対して、Object.entries()メソッドとmap()メソッドを使用すると、以下のような配列に変換することができます。

[
  { key: 'key01', value: 'value01' },
  { key: 'key02', value: 'value02' },
]

上記の配列に変換するサンプルコードを以下に示します。

const obj = {
  key01: 'value01',
  key02: 'value02',
};
const arr = Object.entries(obj).map(([key, value]) => {
  return { key, value };
});
console.log(arr);
// ログ出力
// [
//   { key: 'key01', value: 'value01' },
//   { key: 'key02', value: 'value02' },
// ];

map()メソッドにより、配列の各要素を引数にして新たに配列を生成しています。上記のサンプルコードでは、([key, value])の箇所でObject.entries()メソッドの戻り値を配列の分割代入により、変数keyと変数valueに代入しています。なお、下記のように記述しても同様の変換をすることができます。

const obj = {
  key01: 'value01',
  key02: 'value02',
};
const arr = Object.entries(obj).map(([recieveKey, recieveValue]) => {
  return {
    key: recieveKey,
    value: recieveValue,
  };
});
console.log(arr);
// ログ出力
// [
//   { key: 'key01', value: 'value01' },
//   { key: 'key02', value: 'value02' },
// ];

なお、Object.entries()メソッドとmap()メソッドを使用すると、以下のような配列にも変換することができます。

[
  { key01: 'value01' },
  { key02: 'value02' },
];

上記の配列に変換するサンプルコードを以下に示します。

const obj = {
  key01: 'value01',
  key02: 'value02',
};
const arr = Object.entries(obj).map(([key, value]) => {
  return { [key]: value };
});
console.log(arr);
// ログ出力
// [
//   { key01: 'value01' },
//   { key02: 'value02' },
// ];

[
  { key01: 'value01' },
  { key02: 'value02' },
];

Object.entries()メソッドを使って通常のオブジェクトをMapオブジェクトへ変換する方法

Object.entries()メソッド使用すると、通常のオブジェクトをMapオブジェクトに変換することができます。Object.entries()メソッドを使用してオブジェクトのキーと値のペアを取得し、それをMapコンストラクタに渡します。サンプルコードを以下に示します。

const obj = {
  key01: 'value01',
  key02: 'value02',
};
const map = new Map(Object.entries(obj));

console.log(map);
// ログ出力
// { 'key01' => 'value01', 'key02' => 'value02' }

Object.entries()メソッドの注意点

Object.entries()メソッドを使用する上での注意点を以下に示します。

• 作成される配列の順序(順番)に注意
• オブジェクトでない引数はオブジェクト型に変換される
• 文字列を除く全てのプリミティブ型に対しては空の配列を返す

各注意点について順番に説明します。

作成される配列の順序(順番)に注意

オブジェクトの各プロパティを[key, value]のペアの配列として取得する際、数値のキーは数値の小さい順(昇順)で返され、数値以外のキーは挿入順で返されます。この順序はfor...inループによる順序と同じになります。以下のサンプルコードを見てみましょう。

const obj = {
  key01: 'value01',
  key02: 'value02',
  100: 'value03',
  5: 'value04',
  10: 'value05',
};
const arr = Object.entries(obj);
console.log(arr);
// ログ出力
// [
//   ['5', 'value04'],
//   ['10', 'value05'],
//   ['100', 'value03'],
//   ['key01', 'value01'],
//   ['key02', 'value02'],
// ];

上記のサンプルコードではobjオブジェクトにkey01, key02, 100, 5, 10の順番でプロパティを追加しています。

Object.entries()メソッドでキーを取得すると、まず、数値のキー(100, 5, 10)が昇順で返されます。その後、数値以外のキー(key01, key02)はオブジェクトに追加された順序で返されます。

const obj = {
  key01: 'value01',
  key02: 'value02',
  100: 'value03',
  5: 'value04',
  10: 'value05',
};
for (const key in obj) {
  console.log(`${key}:${obj[key]}`);
}
// ログ出力
// 5:value04
// 10:value05
// 100:value03
// key01:value01
// key02:value02

オブジェクトでない引数はオブジェクト型に変換される

Object.entries()メソッドにオブジェクトでない引数を渡すと、オブジェクト型に変換されます。以下のサンプルコードを見てみましょう。

const arr = Object.entries('hello');
console.log(arr);
// ログ出力
// [
//   ['0', 'h'],
//   ['1', 'e'],
//   ['2', 'l'],
//   ['3', 'l'],
//   ['4', 'o'],
// ];

上記のサンプルコードに示すようにObject.entries()メソッドの引数に文字列'hello'を渡すと、オブジェクト型に変換され、各文字がキー(インデックス)と値のペアになります。

文字列を除く全てのプリミティブ型に対しては空の配列を返す

Object.entries()メソッドにオブジェクトでない引数(文字列を除く全てのプリミティブ型)を渡すと、空の配列を返します。以下のサンプルコードを見てみましょう。

console.log(Object.entries(42));
console.log(Object.entries(true));
// ログ出力
// []
// []

上記のサンプルコードに示すように、数値(42)、ブール値(true)などのプリミティブ型を引数に渡すと、空の配列を返します。

本記事のまとめ

この記事ではJavaScriptの『Object.entries()』について、以下の内容を説明しました。

• Object.entries()メソッドとは
• Object.entries()メソッドの構文
• Object.entries()メソッドの使い方
• Object.entries()メソッドの注意点

お読み頂きありがとうございました。