1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: Object.entries()
slug: Web/JavaScript/Reference/Global_Objects/Object/entries
tags:
- JavaScript
- Властивість
- Об'єкт
- метод
translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
---
<div>{{JSRef}}</div>
<div><span class="seoSummary">Метод <code><strong>Object.entries()</strong></code> повертає масив пар ключ-значення особистих, перелічуваних, рядкових властивостей наданого об'єкта, у тому самому порядку, у якому їх надає цикл {{jsxref("Statements/for...in", "for...in")}} (різниця лише в тому, що цикл for-in також перебирає </span><span style="font-size: 1rem; letter-spacing: -0.00278rem;"><span class="seoSummary">властивості з ланцюга прототипів).</span> Порядок масиву, поверненого </span><strong style="font-size: 1rem; letter-spacing: -0.00278rem;">Object.entries()</strong><span style="font-size: 1rem; letter-spacing: -0.00278rem;">, не залежить від того, як був визначений об'єкт</span>. Якщо вам потрібне певне впорядкування, то масив слід відсортувати наступним чином: <code>Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));</code>.</div>
<div></div>
<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
<h3 id="Параметри">Параметри</h3>
<dl>
<dt><code>obj</code></dt>
<dd>Об'єкт, чиї пари ключ-значення особистих перелічуваних рядкових властивостей потрібно повернути.</dd>
</dl>
<h3 id="Значення_що_повертається">Значення, що повертається</h3>
<div>Масив пар <code>[key, value]</code> з особистих, перелічуваних, рядкових властивостей даного об'єкта.</div>
<h2 id="Опис">Опис</h2>
<p><code>Object.entries()</code> повертає масив, чиїми елементами є масиви, що відповідають парам <code>[key, value]</code> перелічуваних рядкових властивостей, знайдених безпосередньо на об'єкті. Порядок властивостей є таким самим, як і при переборі властивостей об'єкта вручну за допомогою циклу.</p>
<h2 id="Приклади">Приклади</h2>
<pre class="brush: js">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"
});
</pre>
<h3 id="Перетворення_Object_на_Map">Перетворення <code>Object</code> на <code>Map</code></h3>
<p>Конструктор {{jsxref("Map", "new Map()")}} приймає ітерабельний об'єкт, отриманий через <code>entries</code>. За допомогою <code>Object.entries</code>, ви легко можете перетворити {{jsxref("Object")}} на {{jsxref("Map")}}:</p>
<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }
</pre>
<h3 id="Перебір_обєкта">Перебір об'єкта</h3>
<p>Використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація#Деструктуризація_масивів">деструктуризацію масивів</a>, ви можете легко перебирати об'єкти.</p>
<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
Object.entries(obj).forEach(([key, value]) => console.log(`${key}: ${value}`)); // "foo: bar", "baz: 42"
</pre>
<h2 id="Поліфіл">Поліфіл</h2>
<p>Щоб додати підтримку методу <code>Object.entries</code> у старих середовищах, що не підтримують його початково, ви можете використати <span class="tlid-translation translation" lang="uk"><span title="">демонстраційну реалізацію </span></span><code>Object.entries</code><span class="tlid-translation translation" lang="uk"><span title=""> у</span></span> <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> <span class="tlid-translation translation" lang="uk"><span title="">(якщо вам не потрібна підтримка </span></span>IE<span class="tlid-translation translation" lang="uk"><span title="">), поліфіл у репозиторіях</span></span> <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>, або можете просто скористатись простим, готовим до розгортання поліфілом, наведеним нижче.</p>
<pre class="brush: js">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;
};
}
</pre>
<p>Для наведеного вище поліфілу, якщо вам потрібна підтримка IE < 9, тоді вам також знадобиться поліфіл Object.keys (як той, що наведений у статті {{jsxref("Object.keys")}})</p>
<h2 id="Специфікації">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td>Початкове визначення.</td>
</tr>
<tr>
<td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ES8')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
<div>
<p>{{Compat("javascript.builtins.Object.entries")}}</p>
</div>
<h2 id="Див._також">Див. також</h2>
<ul>
<li><a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">Перелічуваність та належність властивостей</a></li>
<li>{{jsxref("Object.keys()")}}</li>
<li>{{jsxref("Object.values()")}}</li>
<li>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</li>
<li>{{jsxref("Object.create()")}}</li>
<li>{{jsxref("Object.fromEntries()")}}</li>
<li>{{jsxref("Object.getOwnPropertyNames()")}}</li>
<li>{{jsxref("Map.prototype.entries()")}}</li>
<li>{{jsxref("Map.prototype.keys()")}}</li>
<li>{{jsxref("Map.prototype.values()")}}</li>
</ul>
|
