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
158
159
160
161
162
163
164
165
166
167
168
|
---
title: Object.entries()
slug: Web/JavaScript/Reference/Global_Objects/Object/entries
tags:
- Entries
- Iterieren
- JavaScript
- Méthode
- Objekt
- Referenz
- Schleife
translation_of: Web/JavaScript/Reference/Global_Objects/Object/entries
---
<div>{{JSRef}}</div>
<p><code><strong>Object.entries()</strong></code><strong> </strong>ist eine Methode für Objekte. Zurückgegeben wird ein Array mit den Eigenschaften des Objektes. Diese Eigenschaften werden in Key-Value-Paaren als zählbare strings zurückgegeben.</p>
<p>Im Gegensatz zur {{jsxref("Statements/for...in", "for...in")}}-Schleife werden dabei nicht die constructor- Eigenschaften zurückgegeben, die das Objekt von seinem <code>prototype</code> geerbt hat.</p>
<div>
<p>Die Reihenfolge der Key-Value-Paare ist dabei die gleiche wie bei einer {{jsxref("Statements/for...in", "for...in")}}-Schleife. Sie hängt nicht davon ab, wie das ursprüngliche Objekt aufgebaut ist. Ist eine bestimmte Reihenfolge erwünscht, muss der Array sortiert werden:<br>
<code>Object.entries(obj).sort((a, b) => b[0].localeCompare(a[0]));</code>.</p>
<p> </p>
</div>
<div>{{EmbedInteractiveExample("pages/js/object-entries.html")}}</div>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">Object.entries(<var>obj</var>)</pre>
<h3 id="Parameter">Parameter</h3>
<dl>
<dt><code>obj</code></dt>
<dd>Ein Objekt besitzt Eigenschaften in Form von Key-Value-Paaren. </dd>
</dl>
<h3 id="Rückgabewert">Rückgabewert</h3>
<p>Zurückgegeben wird ein Array mit den Key-Value-Paaren (<code>[key, value]</code>) eines Objektes in Form von zählbaren strings.</p>
<h2 id="Beschreibung">Beschreibung</h2>
<p><code>Object.entries()</code> erzeugt einen Array auf Basis eines Objekts. Die Eigenschaften des Objekts werden im Array als Key-Value-Paare gespeichert.<br>
Die Reihenfolge der Eigenschaften ist dabei gleich einer manuellen Iteration über das Objekt.</p>
<h2 id="Beispiele">Beispiele</h2>
<pre class="brush: js">const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]
// Array-ähnliches Objekt
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
// Array-ähnliches Objekt mit zufälliger Reihenfolge der Keys
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]
// getFoo- Eigenschaft ist nicht zählbar
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = 'bar';
console.log(Object.entries(myObj)); // [ ['foo', 'bar'] ]
// Das Argument, das kein Objekt ist, wird in ein Objekt umgewandelt
console.log(Object.entries('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]
// Gibt einen Leeren Array zurück, da primitive Datentypen keine eigenen Eigenschaften haben
console.log(Object.entries(100)); // [ ]
// Elegant über Key-Value-Paare iterieren
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"
}
// Mit array extras über Key-Value-Paare iterieren
Object.entries(obj).forEach(([key, value]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
});
</pre>
<h3 id="Ein_Object_in_ein_Map-Objekt_umwandeln">Ein <code>Object</code> in ein <code>Map-Objekt</code> umwandeln</h3>
<p>Der {{jsxref("Map", "new Map()")}}-constructor akzeptiert zählbare <code>entries</code>. Mithilfe von <code>Object.entries</code> kann ein {{jsxref("Object")}} in ein {{jsxref("Map")}}-Objekt umgewandelt werden:</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="Durch_das_Object_iterieren">Durch das <code>Object</code> iterieren</h3>
<p>Mit der Technik der <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung">destrukturierenden Zuweisung</a> kann durch Objekte iteriert werden.</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="Polyfill">Polyfill</h2>
<p>Um <code>Object.entries</code> auch in älteren Umgebungen zu nutzen, die diese Methode nicht nativ unterstützen, sind Polyfills im <a href="https://github.com/tc39/proposal-object-values-entries">tc39/proposal-object-values-entries</a> (ohne IE) order im <a href="https://github.com/es-shims/Object.entries">es-shims/Object.entries</a>-Repository finden. Untenstehender Polyfill ist ebenfalls verwendbar:</p>
<pre class="brush: js">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;
};
}
</pre>
<p>Sollten Sie auch IE < 9 unterstützen müssen, brauchen sie jedoch zusätzlich den <code>Object.keys</code>-Polyfill, zu finden auf {{jsxref("Object.keys")}}.</p>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td>Initiale Definition.</td>
</tr>
<tr>
<td>{{SpecName('ES8', '#sec-object.entries', 'Object.entries')}}</td>
<td>{{Spec2('ES8')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
<div>
<p>{{Compat("javascript.builtins.Object.entries")}}</p>
</div>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</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>
|
