Object.entries()

Object.entries() メソッドは、引数に与えたオブジェクトが所有する、列挙可能なプロパティの組 [key, value] からなる配列を返します。配列要素の順序は for...in ループによる順序と同じです (両者の違いとして、for-in ループではその上プロトタイプチェーン内のプロパティも列挙されます)。 Object.entries() で返される配列の順序は、オブジェクトがどのように定義されたかに依存しません。特定の順序にする必要があるのであれば、 Object.entries(obj).sort((a, b) => a[0] - b[0]); のようにして、まず配列を整列する必要があります。

このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

Object.entries(obj)

引数

obj

返されることになる列挙可能な所有プロパティの組 [key, value] を持つオブジェクト。

返値

引数に与えたオブジェクトが所有する、列挙可能なプロパティの組 [key, value] の配列。

説明

Object.entries() は、 object に直接存在する列挙可能プロパティの組 [key, value] が配列要素に対応した配列を返します。プロパティの順序はオブジェクト内のプロパティに対してループさせた時の順序と同じになります。

例

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// 配列様オブジェクト
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// ランダムなキー順序を持つ配列様オブジェクト
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// 列挙可能でないプロパティ getFoo がある
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]

// オブジェクトでない引数はオブジェクトへと型強制されます
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// returns an empty array for any primitive type, since primitives have no own properties
console.log(Object.entries(100)); // [ ]

// iterate through key-value gracefully
const obj = { a: 5, b: 7, c: 9 };
for (const [key, value] of Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Or, using array extras
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});

Object から Map への変換

new Map() コンストラクタは entries による反復処理に対応しています。Object.entries を使うと、Object から Map へと簡単に変換できます。:

const obj = { foo: 'bar', baz: 42 }; 
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

Object をループする

Array Destructuring を使って、objects を簡単にループできます。

const obj = { foo: 'bar', baz: 42 };
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"

ポリフィル (Polyfill)

Object.entries に対応していない古い環境に互換性を持たせる場合は、tc39/proposal-object-values-entries (IE のサポートが不要な場合) や es-shims/Object.entries 内に Object.entries の実装のポリフィルがありますし、単純に、下記の配布可能なポリフィルを使うこともできます。

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };
}

上記のポリフィルのコードスニペットで、IE < 9 の対応が必要な場合、 Object.keys の polyfill (Object.keys ページにあるようなもの) も必要となります。

仕様書

ブラウザーの対応

関連情報

• プロパティの列挙可能性と所有権
• Object.keys()
• Object.values()
• Object.prototype.propertyIsEnumerable()
• Object.create()
• Object.getOwnPropertyNames()
• Map.prototype.entries()
• Map.prototype.keys()
• Map.prototype.values()