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' ] ]