Object.entries()

Метод Object.entries() повертає масив пар ключ-значення (ключ у вигляді рядка) особистих, перелічуваних властивостей наданого об'єкта, у тому самому порядку, у якому їх надає цикл for...in (різниця лише в тому, що цикл for-in також перебирає властивості з ланцюга прототипів). Порядок масиву, поверненого Object.entries(), не залежить від того, як був визначений об'єкт. Якщо вам потрібне певне впорядкування, то масив слід відсортувати наступним чином: Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));.

Синтаксис

Object.entries(obj)

Параметри

obj
Об'єкт, чиї пари ключ-значення особистих перелічуваних властивостей потрібно повернути.

Значення, що повертається

Масив пар [key, value] з особистих, перелічуваних властивостей даного об'єкта.

Опис

Object.entries() повертає масив, чиїми елементами є масиви, що відповідають парам  [key, value] перелічуваних властивостей, знайдених безпосередньо на об'єкті. Порядок властивостей є таким самим, як і при переборі властивостей об'єкта вручну за допомогою циклу.

Приклади

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

// подібний до масиву об'єкт
const obj = { 0: 'а', 1: 'б', 2: 'в' };
console.log(Object.entries(obj)); // [ ['0', 'а'], ['1', 'б'], ['2', 'в'] ]

// подібний до масиву об'єкт з випадковим порядком ключів
const anObj = { 100: 'а', 2: 'б', 7: 'в' };
console.log(Object.entries(anObj)); // [ ['2', 'б'], ['7', 'в'], ['100', 'а'] ]

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

// повертає порожній масив для усіх простих типів, оскільки примітиви не мають особистих властивостей
console.log(Object.entries(100)); // [ ]

// елегантно перебирає пари ключ-значення
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"
}

// або, використовуючи додаткові функції масивів
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 }

Перебір об'єкта

Використовуючи деструктуризацію масивів, ви можете легко перебирати об'єкти.

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

Поліфіл

Щоб додати підтримку методу Object.entries у старих середовищах, що не підтримують його початково, ви можете використати демонстраційну реалізацію Object.entries у tc39/proposal-object-values-entries (якщо вам не потрібна підтримка IE), поліфіл у репозиторіях es-shims/Object.entries, або можете просто скористатись простим, готовим до розгортання поліфілом, наведеним нижче.

if (!Object.entries) {
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // попередньо виділити пам'ять під масив
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];
    
    return resArray;
  };
}

Для наведеного вище поліфілу, якщо вам потрібна підтримка IE < 9, тоді вам також знадобиться поліфіл Object.keys (як той, що наведений у статті Object.keys)

Специфікації

Специфікація Статус Коментар
ECMAScript Latest Draft (ECMA-262)
The definition of 'Object.entries' in that specification.
Draft Початкове визначення.
ECMAScript 2017 (ECMA-262)
The definition of 'Object.entries' in that specification.
Standard

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
entriesChrome Full support 54Edge Full support 14Firefox Full support 47IE No support NoOpera Full support 41Safari Full support 10.1WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 47Opera Android Full support 41Safari iOS Full support 10.3Samsung Internet Android Full support 6.0nodejs Full support 7.0.0
Full support 7.0.0
Full support 6.5.0
Disabled
Disabled From version 6.5.0: this feature is behind the --harmony runtime flag.

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.

Див. також