Wie kann man in JavaScript einem Objekt ein Element bedingt hinzufügen?

Question

Ich möchte ein Objekt erstellen, zu dem ein Element bedingt hinzugefügt wird. Der einfache Ansatz ist:

var a = {};
if (someCondition)
    a.b = 5;

Jetzt würde ich gerne einen idiomatischeren Code schreiben. Ich versuche es:

a = {
    b: (someCondition? 5 : undefined)
};

Aber jetzt, b ist ein Mitglied von a deren Wert ist undefined . Dies ist nicht das gewünschte Ergebnis.

Gibt es eine praktische Lösung?

Update

Ich suche nach einer Lösung, die den allgemeinen Fall mit mehreren Mitgliedern behandeln kann.

a = {
  b: (conditionB? 5 : undefined),
  c: (conditionC? 5 : undefined),
  d: (conditionD? 5 : undefined),
  e: (conditionE? 5 : undefined),
  f: (conditionF? 5 : undefined),
  g: (conditionG? 5 : undefined),
 };

Answer 1

Ich glaube, @InspiredJW hat es mit ES5 gemacht, und wie @trincot sagte, ist es6 ein besserer Ansatz. Aber wir können noch ein bisschen mehr Zucker hinzufügen, indem wir den Spread-Operator und die logische UND-Kurzschlussauswertung verwenden:

const a = {
   ...(someCondition && {b: 5})
}

Answer 2

const obj = {
   ...(condition) && {someprop: propvalue},
   ...otherprops
}

Live-Demo:

const obj = {
  ...(true) && {someprop: 42},
  ...(false) && {nonprop: "foo"},
  ...({}) && {tricky: "hello"},
}

console.log(obj);

Answer 3

Ich schlage Folgendes vor:

const a = {
   ...(someCondition? {b: 5}: {})
}

Answer 4

In reinem Javascript kann ich mir nichts Idiomatischeres vorstellen als Ihren ersten Codeschnipsel.

Wenn jedoch die Verwendung der jQuery-Bibliothek nicht in Frage kommt, dann $.extend() sollte Ihre Anforderungen erfüllen, denn, wie die Dokumentation sagt:

Undefinierte Eigenschaften werden nicht kopiert.

Sie können also schreiben:

var a = $.extend({}, {
    b: conditionB ? 5 : undefined,
    c: conditionC ? 5 : undefined,
    // and so on...
});

und die erwarteten Ergebnisse erzielen (wenn conditionB es false dann b wird nicht existieren in a ).

Answer 5

Mit EcmaScript2015 können Sie Object.assign :

Object.assign(a, conditionB ? { b: 1 } : null,
                 conditionC ? { c: 2 } : null,
                 conditionD ? { d: 3 } : null);

var a, conditionB, conditionC, conditionD;
conditionC = true;
a = {};
Object.assign(a, conditionB ? { b: 1 } : null,
                 conditionC ? { c: 2 } : null,
                 conditionD ? { d: 3 } : null);

console.log(a);

Einige Bemerkungen:

• Object.assign ändert das erste Argument an Ort und Stelle, gibt aber auch das aktualisierte Objekt zurück: Sie können diese Methode also in einem größeren Ausdruck verwenden, der das Objekt weiter bearbeitet.
• Anstelle von null Sie könnten bestehen undefined o {} mit demselben Ergebnis. Sie könnten sogar bereitstellen 0 stattdessen, weil primitive Werte umhüllt sind, und Number hat keine eigenen aufzählbaren Eigenschaften .

Noch prägnanter

Wenn man den zweiten Punkt weiter verfolgt, könnte man ihn wie folgt abkürzen (wie @Jamie hervorgehoben hat), da Falsy-Werte keine eigenen aufzählbaren Eigenschaften haben ( false , 0 , NaN , null , undefined , '' außer document.all ):

Object.assign(a, conditionB && { b: 1 },
                 conditionC && { c: 2 },
                 conditionD && { d: 3 });

var a, conditionB, conditionC, conditionD;
conditionC = "this is truthy";
conditionD = NaN; // falsy
a = {};
Object.assign(a, conditionB && { b: 1 },
                 conditionC && { c: 2 },
                 conditionD && { d: 3 });
console.log(a);