diff options
Diffstat (limited to 'files/de/web/javascript/reference/global_objects/object/entries/index.html')
| -rw-r--r-- | files/de/web/javascript/reference/global_objects/object/entries/index.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/files/de/web/javascript/reference/global_objects/object/entries/index.html b/files/de/web/javascript/reference/global_objects/object/entries/index.html new file mode 100644 index 0000000000..4ac921f62b --- /dev/null +++ b/files/de/web/javascript/reference/global_objects/object/entries/index.html @@ -0,0 +1,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> |
