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

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

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

1. Wenn die BedingungB false & BedingungC ist true dann a = { c: 5 }
2. Wenn sowohl Bedingung B als auch Bedingung C erfüllt sind true dann a = { b: 4, c: 5 }
3. Wenn sowohl Bedingung B als auch Bedingung C erfüllt sind false dann a = {}

Answer 2

In ein Objekt einwickeln

So etwas ist etwas 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 einpacken

Oder wenn Sie die Methode von Jamie Hill verwenden wollen und eine sehr lange Liste von Bedingungen haben, müssen Sie schreiben ... Syntax mehrere Male. Um es etwas sauberer zu machen, kann man sie einfach in ein Array packen und dann mit reduce() um sie als ein einziges Objekt zurückzugeben.

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() función

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))

Answer 3

Der Vollständigkeit halber können Sie auch Object.defineProperty() wenn Sie zusätzliche Informationen hinzufügen möchten Deskriptoren . Anmerkung: Ich habe absichtlich enumerable: true sonst würde die Eigenschaft nicht in der console.log() . Der Vorteil dieses Ansatzes ist, dass Sie auch Object.defineProperties() wenn Sie Folgendes hinzufügen möchten mehrere neue Eigenschaften (Auf diese Weise wird jedoch jede Eigenschaft von der gleichen Bedingung abhängig sein...)

const select = document.getElementById("condition");
const output = document.getElementById("output");
let a = {};
let b = {};

select.onchange = (e) => {
  const condition = e.target.value === "true";
  condition
    ? Object.defineProperty(a, "b", {
        value: 5,
        enumerable: true,
      })
    : (a = {});

  condition
    ? Object.defineProperties(b, {
        c: {
          value: 5,
          enumerable: true,
        },
        d: {
          value: 6,
          enumerable: true,
        },
        e: {
          value: 7,
          enumerable: true,
        },
      })
    : (b = {});

  outputSingle.innerText = JSON.stringify(a);
  outputMultiple.innerText = JSON.stringify(b);
};

Condition:
<select id="condition">
  <option value="false">false</option>
  <option value="true">true</option>
</select>
<br/>
<br/>
Single Property: <pre id="outputSingle">{}</pre><br/>
Multiple Properties: <pre id="outputMultiple">{}</pre>

Answer 4

Definieren Sie eine var durch let und weisen Sie einfach eine neue Eigenschaft zu

let msg = {
    to: "hito@email.com",
    from: "hifrom@email.com",
    subject: "Contact form",    
};

if (file_uploaded_in_form) { // the condition goes here
    msg.attachments = [ // here 'attachments' is the new property added to msg Javascript object
      {
        content: "attachment",
        filename: "filename",
        type: "mime_type",
        disposition: "attachment",
      },
    ];
}

Jetzt ist die msg werden.

{
    to: "hito@email.com",
    from: "hifrom@email.com",
    subject: "Contact form",
    attachments: [
      {
        content: "attachment",
        filename: "filename",
        type: "mime_type",
        disposition: "attachment",
      },
    ]
}

Meiner Meinung nach ist dies eine sehr einfache und leichte Lösung.