JavaScriptのObject.entriesの使い方！キーと値のペアを取得

JavaScriptの Object.entriesメソッドは、指定されたオブジェクト自身の列挙可能な（enumerable）プロパティのキーと値のペアを、配列の配列として返すために使用されます。

これにより、オブジェクトのプロパティをループ処理したり、キーと値のペアをまとめて操作したりする際に非常に便利です。
Object.keysがキーの配列を、Object.valuesが値の配列を返すのに対し、Object.entriesは両方を同時に取得できるため、オブジェクトの反復処理において非常に強力なツールとなります。

この記事では、Object.entriesメソッドの基本的な使い方、引数、戻り値、主要な使用例、そして使用する際の重要な注意点について解説します。

Object.entriesメソッドの基本的な構文

Object.entriesメソッドの基本的な構文は以下の通りです。

Object.entries(obj)
  • obj: 必須。キーと値のペアを取得したいオブジェクトです。

obj (引数)

  • 必須です。
  • キーと値のペアを取得したいオブジェクトを指定します。
  • objがプリミティブ値（文字列、数値、真偽値など）の場合、内部的にオブジェクトに変換されてからプロパティが抽出されます。例えば、文字列を渡すと、その文字列のインデックスと文字のペアが返されます（例: "abc" を渡すと [['0', 'a'], ['1', 'b'], ['2', 'c']]）
  • nullまたはundefinedを渡すと、TypeErrorが発生します。

Object.entriesの戻り値

指定されたオブジェクトの列挙可能な自身のプロパティの[キー, 値]ペアの配列が返されます。
元のオブジェクトは変更されません。

Object.entriesメソッドを使ってみる

Object.entriesのメソッドを使って、動作を確認してみます。

例1：基本的なオブジェクトでの使用

シンプルなオブジェクトのキーと値のペアを取得します。

const user = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

const entries = Object.entries(user);

console.log(entries);
/*
出力:
[
  [ 'name', 'Alice' ],
  [ 'age', 30 ],
  [ 'city', 'New York' ]
]
*/

userオブジェクトを作成して、Object.entriesに渡しています。

これでuserオブジェクトの各プロパティが、[キー, 値]の形式の配列として取得されます。
そして、それらがさらに配列としてまとめられていることがわかります。

出力すると、プロパティと値が配列にまとめられていることが確認できました。

例2： for…ofループとの組み合わせ

Object.entriesは、for...ofループと組み合わせることで、オブジェクトのプロパティを簡単に反復処理できます。

const product = {
  id: 'P001',
  name: 'Wireless Mouse',
  price: 25.99,
  inStock: true
};

console.log("--- 商品情報 ---");
for (const [key, value] of Object.entries(product)) {
  console.log(`${key}: ${value}`);
}
/*
出力:
--- 商品情報 ---
id: P001
name: Wireless Mouse
price: 25.99
inStock: true
*/

for...ofを使用して、Object.entriesにproductオブジェクトを渡した結果を使用しています。
そして、分割代入（[key, value]）を使用することで、各ペアのキーと値を直接変数に割り当てて、読みやすいコードで処理できます。

結果を確認すると、それぞれプロパティとキーがある間ループして
key変数にオブジェクトのプロパティ、value変数に値が入ってくることが確認できました。

例3：オブジェクトをMapオブジェクトに変換する

Object.entriesは、オブジェクトをMapオブジェクトに変換する際の中間ステップとして非常に便利です。

const settings = {
  theme: 'dark',
  notifications: true,
  language: 'ja'
};

// Object.entries()でキーと値のペアの配列を取得し、Mapコンストラクタに渡す
const settingsMap = new Map(Object.entries(settings));

console.log(settingsMap);
// 出力: Map(3) { 'theme' => 'dark', 'notifications' => true, 'language' => 'ja' }

console.log(settingsMap.get('language')); // 出力: ja

new Mapでインスタンスを作るときに、Object.entriesの戻り値を使っています。
これで渡したオブジェクトがマップに変換されます。

Mapはキーの順序を保持し、任意の型のキーを使用できるため、オブジェクトの代替として利用されることがあります。

例4：数値キーを持つオブジェクト（配列のようなオブジェクト）

数値キーを持つオブジェクトの場合、Object.entriesは数値キーを昇順で返します。

const data = {
  '10': 'Value 10',
  '2': 'Value 2',
  '5': 'Value 5',
  'name': 'Test Data'
};

const entries = Object.entries(data);

console.log(entries);
/*
出力:
[
  [ '2', 'Value 2' ],
  [ '5', 'Value 5' ],
  [ '10', 'Value 10' ],
  [ 'name', 'Test Data' ]
]
*/

'2', '5', '10'という文字列の数値キーが、数値として昇順に並べ替えられてから、文字列キーが追加されていることに注目してください。
Object.entriesを使った場合、このように要素がキーの昇順に並んで返ってきます。

Object.entriesを使う際の重要な注意点

Object.entriesを使う際の注意点です。

列挙可能な自身のプロパティのみを対象とする

  • Object.definePropertyでenumerable: falseと設定されたプロパティは含まれません。
  • プロトタイプチェーン上の継承されたプロパティは含まれません。
const protoObj = { inheritedProp: 'I am inherited' };
const myObj = Object.create(protoObj);

myObj.ownProp = 'I am own';

Object.defineProperty(myObj, 'nonEnumerableProp', {
  value: 'I am not enumerable',
  enumerable: false // 列挙不可に設定
});

console.log(Object.entries(myObj));
// 出力: [ [ 'ownProp', 'I am own' ] ]
// inheritedProp と nonEnumerableProp は含まれない

シンボルプロパティは含まれない

Object.entriesは、Symbol型のキーを持つプロパティを返しません。
シンボルプロパティを取得するにはObject.getOwnPropertySymbolsを使用します。

const objWithSymbol = {
  a: 1,
  [Symbol('b')]: 2
};

console.log(Object.entries(objWithSymbol));
// 出力: [ [ 'a', 1 ] ] (シンボルプロパティは含まれない)

順序

プロパティの順序は、for...inループで取得される順序と同じです。
これは、数値キーの場合は昇順、それ以外の文字列キーは定義順（またはエンジン依存）になります。

元のオブジェクトは変更されない

Object.entriesは元のオブジェクトを変更せず、新しい配列を返します。

nullまたはundefinedの引数

Object.entries(null)やObject.entries(undefined)を呼び出すとTypeErrorが発生します。

まとめ

JavaScriptのObject.entriesメソッドは、オブジェクトの列挙可能な自身のプロパティを[キー, 値]のペアの配列として取得するための非常に強力で便利なツールです。
for...ofループと組み合わせることでオブジェクトの反復処理を簡潔に記述でき、Mapへの変換など、様々なデータ操作に応用できます。

ただし、列挙可能な自身のプロパティのみを対象とすること、シンボルプロパティは含まれないこと、そして数値キーの順序付けの特性を理解して使用することが重要です。
これらの注意点を踏まえ、Object.entriesを効果的に活用し、JavaScriptアプリケーションにおけるオブジェクトデータの操作を効率化しましょう。

コメント