実行環境 Node.js 15.2.1

公開日 March 18, 2021, GMT+9

コード例の出力としてconsole.logを使用しています。

使用方法がわからない場合は以下のページを参照してからコード例を確認してください。

console.logの使用方法

Object.entries

このページでは豊富な例を用いてJavaScript(js)のObject.entriesメソッドの使い方を学ぶことができます。

JavaScript(js)のObject.entriesメソッドは、「引数で与えたオブジェクトの列挙可能プロパティの組(キー・バリュー)の配列」を要素とした配列を返り値として返します。
「キーがSymbol型であるプロパティ」は返り値の要素として含まれません。

「返り値の配列の要素の順番」は任意で決まるので、配列などの「順序が重要な意味を持つオブジェクト」に対しての使用は推奨されません。

// 記述例

const [[キー1, バリュー1], [キー2, バリュー2], ... ] = Object.entries(キー・バリューを列挙したいオブジェクト);

TL;DR

基本

// 引数で指定したオブジェクトの「キー・バリューペアの配列」を返す
const object1 = { id: 1, name: 'js' };
const returnValue1 = Object.entries(object1);
console.log(returnValue1);
==> [ [ 'id', 1 ], [ 'name', 'js' ] ]

// 返り値は配列
console.log(returnValue1 instanceof Array);
==> true







// キーは文字列として返される
const object2 = { 1: 'js', 2: 'JavaScript' };
const returnValue2 = Object.entries(object2);
console.log(returnValue2);
==> [ [ '1', 'js' ], [ '2', 'JavaScript' ] ]







// キーがSymbol型のプロパティは無視される
const object3 = { id: 1, [Symbol('popularity')]: 1, name: 'js' };
console.log(object3);
==> { id: 1, name: 'js', [Symbol(popularity)]: 1 }

const returnValue3 = Object.entries(object3);
console.log(returnValue3);
==> [ [ 'id', 1 ], [ 'name', 'js' ] ]







// for...of文との組み合わせ
const object4 = { id: 1, name: 'js', fullName: 'JavaScript' };
for (const [key, value] of Object.entries(object4)) {
  console.log(`key = ${key}, value = ${value}`);
}
==> key = id, value = 1
==> key = name, value = js
==> key = fullName, value = JavaScript






// 空オブジェクトの場合
const object5 = {};
const returnValue5 = Object.entries(object5);
console.log(returnValue5);
==> []

関連情報:instanceof演算子の使用方法

関連情報:for...of文の使用方法

連想配列以外のオブジェクト

// Arrayオブジェクト(配列)の場合
const array1 = ['js', 'javascript'];
const returnValue1 = Object.entries(array1);
console.log(returnValue1);
==> [ [ '0', 'js' ], [ '1', 'javascript' ] ]






// Stringオブジェクト(文字列)の場合
const string2 = 'Foo';
const returnValue2 = Object.entries(string2);
console.log(returnValue2);
==> [ [ '0', 'F' ], [ '1', 'o' ], [ '2', 'o' ] ]

解説

// 記述例

const [[キー1, バリュー1], [キー2, バリュー2], ... ] = Object.entries(キー・バリューを列挙したいオブジェクト);

基本

Object.entriesメソッドは引数で指定したオブジェクトのキー・バリューペアを要素とした配列を返り値として返します。
返り値の配列要素であるキー・バリューの組は配列として提供され、キーは文字列として返されます。

返り値の対象となるキー・バリューペアは「列挙可能プロパティ」に限られ、また、オブジェクトのキーがSymbol型のプロパティは返り値の要素に含まれません。

Object.entriesメソッドの返り値の要素の順番は任意で決まるため、順序が重要である配列などに対する使用は推奨されません。

const object1 = { name: 'Alex', age: 50 };
const returnValue1 = Object.entries(object1);
console.log(returnValue1);
==> [ [ 'name', 'Alex' ], [ 'age', 50 ] ]

// 返り値は配列
console.log(returnValue1 instanceof Array);
==> true







// キーは文字列として返される
const object2 = { 1: 'A', 2: 'B' };
const returnValue2 = Object.entries(object2);
console.log(returnValue2);
==> [ [ '1', 'A' ], [ '2', 'B' ] ]







// Symbol型のキーであるプロパティは返り値に含まれない
const object3 = { name: 'Alex', age: 50, [Symbol('class')]: 1 };
console.log(object3);
==> { name: 'Alex', age: 50, [Symbol(class)]: 1 }

const returnValue3 = Object.entries(object3);
console.log(returnValue3);
==> [ [ 'name', 'Alex' ], [ 'age', 50 ] ]







const object4 = { name: 'Alex', age: 50 };
for (const [key, value] of Object.entries(object4)) {
  console.log(`key = ${key}, value = ${value}`);
}
==> key = name, value = Alex
==> key = age, value = 50






// 空オブジェクトの場合
const object5 = {};
const returnValue5 = Object.entries(object5);
console.log(returnValue5);
==> []

関連情報:instanceof演算子の使用方法

関連情報:for...of文の使用方法

連想配列以外のオブジェクト

Object.entriesメソッドは引数にオブジェクトを指定できるため、連想配列以外のオブジェクトにも使用することができます。

しかし、前項でも言及したとおり、「順序が重要な意味を持つオブジェクト」に対しての使用は推奨されないことに注意してください。

// Arrayオブジェクト(配列)
const array1 = ['A', 'B', 'C'];
const returnValue1 = Object.entries(array1);
console.log(returnValue1);
==> [ [ '0', 'A' ], [ '1', 'B' ], [ '2', 'C' ] ]






// Stringオブジェクト(文字列)
const string2 = 'ABC';
const returnValue2 = Object.entries(string2);
console.log(returnValue2);
==> [ [ '0', 'A' ], [ '1', 'B' ], [ '2', 'C' ] ]

1次情報

Object.entries() - MDN web docs

プロパティの列挙可能性と所有権 - MDN web docs