2016-01-29 8 views
12

Ich freue mich auf die stage 3 proposal of Object.values/Object.entries und ich würde es gerne in meinem aktuellen JavaScript-Projekt verwenden.Babel Unterstützung für Object.entries

Allerdings kann ich nicht herausfinden, ob es ein Babel-Preset gibt, das es unterstützt. Da das GitHub-Repository, das oben verlinkt ist, sagt, dass es ein Stufe-3-Vorschlag ist, nahm ich an, dass es Teil von babel-preset-stage-3 sein würde, aber es scheint nicht so.

Gibt es eine Babel-Voreinstellung (oder sogar ein Plugin?), Mit der ich heute Object.entries verwenden kann?

+1

https://babeljs.io/docs/usage/polyfill/, https://github.com/zloirock/core-js#ecmascript-7 -proposals –

+0

@FelixKling: Danke, aber ich fürchte, ich weiß nicht wirklich, was ich mit den von Ihnen verlinkten Informationen machen soll! – damd

+2

Babel Polyfill verwendet einfach Core-Js, aber ich bin mir nicht sicher, welche Funktionen. Wenn Sie nur 'Object.entries' unterstützen wollen, laden Sie einfach den Polyfill von core-js dazu. –

Antwort

21

babel Anwendung, Installation

  1. babel-preset-es2017
  2. babel-plugin-transform-runtime

gibt Unterstützung für Object.values/Object.entries sowie andere ES2017 Funktionalität.

Gemäß Empfehlung durch die Module, konfigurieren .babelrc mit den folgenden:

{ 
    "plugins": ["transform-runtime"], 
    "presets": ["es2017"] 
} 
+4

Ich sehe keine Unterstützung von "Object.entries" in https://babeljs.io/docs/plugins/preset-es2017/. Wurde die Unterstützung in ein anderes Preset verschoben? https://github.com/bettiolo/babel-preset-es2017/issues/37 scheint zu bestätigen, dass diese Funktionalität nicht von der Voreinstellung abgedeckt wird. – Gili

+0

Für Knoten ist es, wenn Sie babel verwenden. Hast du es versucht? – petersv

+2

Ich zielte auf einen Browser. In diesem Zusammenhang müssen Sie https://babeljs.io/docs/usage/polyfill/ verwenden. Können Sie die Antwort aktualisieren, um zu erfahren, was Benutzer für Node vs Browser tun sollten? – Gili

7

Was ich tat, war core-js installieren und dann diese nur an der Spitze meiner Datei aufrufen:

require('core-js/fn/object/entries'); 

Diese Object.entries zur Verfügung gestellt. Dank an @FelixKling.

5

Ich habe diese Methoden selbst wie folgt erstellt:

Object.values = x => 
     Object.keys(x).reduce((y, z) => 
      y.push(x[z]) && y, []); 

    Object.entries = x => 
     Object.keys(x).reduce((y, z) => 
      y.push([z, x[z]]) && y, []); 

Diese Rückkehr-Arrays, die das repräsentieren erwartetes Verhalten auf JSON ähnliche Objekte.

Verbrauch:

Object.values = x => 
 
    Object.keys(x).reduce((y, z) => 
 
    y.push(x[z]) && y, []); 
 

 
Object.entries = x => 
 
    Object.keys(x).reduce((y, z) => 
 
    y.push([z, x[z]]) && y, []); 
 

 

 
const a = { 
 
    key: "value", 
 
    bool: true, 
 
    num: 123 
 
} 
 

 
console.log(
 
    Object.values(a) 
 
) 
 

 
console.log(
 
    Object.entries(a) 
 
)

+3

Sie können hier 'map' anstelle von' reduce' verwenden, was etwas einfacher ist: '.map (key => object [key])' (wobei 'object' Ihr' x' ist). Ich gehe auch davon aus, dass Sie die Leistung über die Lesbarkeit stellen, wenn Sie den Variablen Namen mit einem Buchstaben geben, aber da dies eine lehrreiche Antwort ist, würde ich vorschlagen, logische Namen zu verwenden und einen Kommentar zu deren Kürzung hinzuzufügen. – ArneHugo