Wie kann man in Javascript einem Objekt bedingt ein Mitglied hinzufügen?

Ich möchte ein Objekt mit einem bedingt hinzugefügten Mitglied erstellen. Der einfache Ansatz ist:

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

Jetzt möchte ich einen idiomatischeren Code schreiben. Ich versuche:

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

Aber jetzt bist ein Mitglied, adessen Wert ist undefined. Dies ist nicht das gewünschte Ergebnis.

Gibt es eine praktische Lösung?

Aktualisieren

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),
 };

In reinem Javascript kann ich mir nichts Idiomatischeres vorstellen als Ihr erstes Code-Snippet.

Wenn die Verwendung der jQuery-Bibliothek jedoch nicht ausgeschlossen ist, sollte $ .extend () Ihren Anforderungen entsprechen, da in der Dokumentation Folgendes angegeben ist :

Undefinierte Eigenschaften werden nicht kopiert.

Daher können Sie schreiben:

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

Und erhalten Sie die Ergebnisse, die Sie erwarten (wenn conditionBja false, dann bwird es in nicht existieren a).

Ich denke, @InspiredJW hat es mit ES5 gemacht, und wie @trincot betonte, ist die Verwendung von es6 ein besserer Ansatz. Mit dem Spread-Operator und der logischen UND-Kurzschlussbewertung können wir jedoch etwas mehr Zucker hinzufügen:

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

Mit EcmaScript2015 können Sie Folgendes verwenden 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 Anmerkungen:

• Object.assign Ändert das erste Argument direkt, gibt aber auch das aktualisierte Objekt zurück. Sie können diese Methode also in einem größeren Ausdruck verwenden, der das Objekt weiter manipuliert.
• Stattdessen nullkönnten Sie undefinedoder {}mit dem gleichen Ergebnis bestehen. Sie können 0stattdessen sogar angeben , da primitive Werte umbrochen werden und Numberkeine eigenen aufzählbaren Eigenschaften haben .

Noch prägnanter

Unter dem zweiten Punkt weiter, könnte man es verkürzt wie folgt (wie @Jamie bemerkt hat), als falsy Werte keine eigenen enumerable Eigenschaften ( false, 0, NaN, null, undefined, '', mit Ausnahme 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);

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

Live-Demo:

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

console.log(obj);

Die Verwendung der Spread-Syntax mit Booleschen Werten (wie hier vorgeschlagen) ist keine gültige Syntax. Spread kann nur mit iterables verwendet werden .

Ich schlage folgendes vor:

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

Wie wäre es mit der Verwendung erweiterter Objekteigenschaften und der Festlegung der Eigenschaft nur, wenn sie wahr ist, z.

[isConditionTrue() && 'propertyName']: 'propertyValue'

Wenn die Bedingung nicht erfüllt ist, wird die bevorzugte Eigenschaft nicht erstellt, und Sie können sie verwerfen. Siehe: http://es6-features.org/#ComputedPropertyNames

UPDATE: Es ist noch besser, dem Ansatz von Axel Rauschmayer in seinem Blog-Artikel über das bedingte Hinzufügen von Einträgen in Objektliteralen und Arrays zu folgen ( http://2ality.com/2017/04/conditional-literal-entries.html ):

const arr = [
  ...(isConditionTrue() ? [{
    key: 'value'
  }] : [])
];

const obj = {
  ...(isConditionTrue() ? {key: 'value'} : {})
};

Hat mir sehr geholfen.

vereinfacht,

const a = {
    ...(condition && {b: 1}) // if condition is true 'b' will be added.
}

Wenn das Ziel darin besteht, dass das Objekt in sich geschlossen erscheint und sich in einer Reihe von Klammern befindet, können Sie Folgendes versuchen:

var a = new function () {
    if (conditionB)
        this.b = 5;

    if (conditionC)
        this.c = 5;

    if (conditionD)
        this.d = 5;
};

Wenn Sie diese Serverseite (ohne JQuery) ausführen möchten, können Sie lodash 4.3.0 verwenden:

a = _.pickBy({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined));

Und das funktioniert mit lodash 3.10.1

a = _.pick({ b: (someCondition? 5 : undefined) }, _.negate(_.isUndefined));

var a = {
    ...(condition ? {b: 1} : '') // if condition is true 'b' will be added.
}

Ich hoffe, dies ist der viel effizientere Weg, um einen Eintrag basierend auf der Bedingung hinzuzufügen. Weitere Informationen zum bedingten Hinzufügen von Einträgen in Objektliteralen.

Dies wurde lange beantwortet, aber als ich mir andere Ideen ansah, kam ich auf eine interessante Ableitung:

Weisen Sie derselben Eigenschaft undefinierte Werte zu und löschen Sie sie anschließend

Erstellen Sie Ihr Objekt mit einem anonymen Konstruktor und weisen Sie immer undefinierte Elemente demselben Dummy- Element zu, das Sie ganz am Ende entfernen. Dies gibt Ihnen eine einzelne Zeile (hoffentlich nicht zu komplex) pro Mitglied + 1 zusätzliche Zeile am Ende.

var a = new function() {
    this.AlwaysPresent = 1;
    this[conditionA ? "a" : "undef"] = valueA;
    this[conditionB ? "b" : "undef"] = valueB;
    this[conditionC ? "c" : "undef"] = valueC;
    this[conditionD ? "d" : "undef"] = valueD;
    ...
    delete this.undef;
};

Sie können alle Ihre undefinierten Werte ohne Bedingung hinzufügen und dann verwenden JSON.stringify, um sie alle zu entfernen:

const person = {
  name: undefined,
  age: 22,
  height: null
}

const cleaned = JSON.parse(JSON.stringify(person));

// Contents of cleaned:

// cleaned = {
//   age: 22,
//   height: null
// }

Ich würde das tun

var a = someCondition ? { b: 5 } : {};

Mit einer Zeilencode-Version bearbeitet

Mit der lodash-Bibliothek können Sie _.omitBy verwenden

var a = _.omitBy({
    b: conditionB ? 4 : undefined,
    c: conditionC ? 5 : undefined,
}, _.IsUndefined)

Dies ist praktisch, wenn Sie optionale Anforderungen haben

var a = _.omitBy({
    b: req.body.optionalA,  //if undefined, will be removed
    c: req.body.optionalB,
}, _.IsUndefined)

Ich denke, Ihr erster Ansatz, Mitglieder bedingt hinzuzufügen, ist vollkommen in Ordnung. Ich stimme nicht wirklich mit nicht Mitglied haben will , bder amit einem Wert von undefined. Es ist einfach genug, mit dem Operator eine undefinedPrüfung unter Verwendung einer forSchleife hinzuzufügen in. Auf jeden Fall können Sie leicht eine Funktion schreiben, um undefinedMitglieder herauszufiltern .

var filterUndefined = function(obj) {
  var ret = {};
  for (var key in obj) {
    var value = obj[key];
    if (obj.hasOwnProperty(key) && value !== undefined) {
      ret[key] = value;
    }
  }
  return ret;
};

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

Sie können den deleteOperator auch verwenden , um das Objekt an Ort und Stelle zu bearbeiten.

In ein Objekt einwickeln

So etwas ist ein bisschen sauberer

 const obj = {
   X: 'dataX',
   Y: 'dataY',
   //...
 }

 const list = {
   A: true && 'dataA',
   B: false && 'dataB',
   C: 'A' != 'B' && 'dataC',
   D: 2000 < 100 && 'dataD',
   // E: conditionE && 'dataE',
   // F: conditionF && 'dataF',
   //...
 }

 Object.keys(list).map(prop => list[prop] ? obj[prop] = list[prop] : null)

In ein Array einwickeln

Oder wenn Sie die Methode von Jamie Hill verwenden möchten und eine sehr lange Liste von Bedingungen haben, müssen Sie die ...Syntax mehrmals schreiben . Um es ein bisschen sauberer zu machen, können Sie sie einfach in ein Array einbinden und dann reduce()als einzelnes Objekt zurückgeben.

const obj = {
  X: 'dataX',
  Y: 'dataY',
  //...

...[
  true && { A: 'dataA'},
  false && { B: 'dataB'},
  'A' != 'B' && { C: 'dataC'},
  2000 < 100 && { D: 'dataD'},
  // conditionE && { E: 'dataE'},
  // conditionF && { F: 'dataF'},
  //...

 ].reduce(( v1, v2 ) => ({ ...v1, ...v2 }))
}

Oder mit map()Funktion

const obj = {
  X: 'dataX',
  Y: 'dataY',
  //...
}

const array = [
  true && { A: 'dataA'},
  false &&  { B: 'dataB'},
  'A' != 'B' && { C: 'dataC'},
  2000 < 100 && { D: 'dataD'},
  // conditionE && { E: 'dataE'},
  // conditionF && { F: 'dataF'},
  //...

 ].map(val => Object.assign(obj, val))

Dies ist die prägnanteste Lösung, die ich finden kann:

var a = {};
conditionB && a.b = 5;
conditionC && a.c = 5;
conditionD && a.d = 5;
// ...

Mit der lodash-Bibliothek können Sie _.merge verwenden

var a = _.merge({}, {
    b: conditionB ? 4 : undefined,
    c: conditionC ? 5 : undefined,
})

1. Wenn BedingungB false& BedingungC ist true, danna = { c: 5 }
2. Wenn sowohl Bedingung B als auch Bedingung C sind true, danna = { b: 4, c: 5 }
3. Wenn sowohl Bedingung B als auch Bedingung C sind false, danna = {}