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

Bedingtes Hinzufügen eines Mitglieds zu einem Objekt

const trueCondition = true;
const falseCondition = false;
const obj = {
  ...(trueCondition && { student: 10 }),
  ...(falseCondition && { teacher: 2 }),
};

// { student: 10 }

Answer 2

EINFACHE ES6-LÖSUNG

Einzelne Bedingung mit (&)

const didIPassExam = true

const study = {
  monday : 'writing',
  tuesday : 'reading',

  /* check conditionally and if true, then add wednesday to study */

  ...(didIPassExam && {wednesday : 'sleep happily'})
}

console.log(study)

Doppelte Bedingung mit (? :)

const score = 110
//const score = 10

const storage = {
  a:10,
  b:20,
  ...(score > 100  ? {c: 30} : {d:40}) 
}

console.log(storage)

Erläuterung

Nehmen wir an, Sie haben storage Objekt wie folgt

const storage = {
  a : 10,
  b : 20,
}

und Sie möchten diesem eine Requisite hinzufügen, die auf folgenden Bedingungen basiert score

const score = 90

Sie möchten nun eine Stütze hinzufügen c:30 a storage wenn score größer ist als 100 .

Wenn die Punktzahl kleiner ist als 100 , dann müssen Sie Folgendes hinzufügen d:40 a storage . Sie können wie folgt vorgehen

const score = 110

const storage = {
  a:10,
  b:20,
  ...(score > 100  ? {c: 30} : {d:40}) 
}

Der obige Code ergibt storage als

{
  a: 10,
  b: 20,
  c: 30
}

Si score = 90

dann erhalten Sie storage als

{
  a: 10,
  b: 20,
  d: 40
}

Codepen-Beispiel

Answer 3

Leistungsprüfung

Klassisch Anfahrt

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

VS

Spread-Operator Anfahrt

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

Ergebnisse :

Der klassische Ansatz ist viel schneller, daher sollte man in Betracht ziehen, dass das Syntax-Sugaring langsamer ist.

testClassicConditionFulfilled(); // ~ 234,9ms
testClassicConditionNotFulfilled(); // ~493.1ms
testSpreadOperatorConditionFulfilled(); // ~2649,4ms
testSpreadOperatorConditionNotFulfilled(); // ~2278,0ms

function testSpreadOperatorConditionFulfilled() {
  const value = 5;

  console.time('testSpreadOperatorConditionFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {
      ...(value && {b: value})
    };
  }
  console.timeEnd('testSpreadOperatorConditionFulfilled');
}

function testSpreadOperatorConditionNotFulfilled() {
  const value = undefined;

  console.time('testSpreadOperatorConditionNotFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {
      ...(value && {b: value})
    };
  }
  console.timeEnd('testSpreadOperatorConditionNotFulfilled');
}

function testClassicConditionFulfilled() {
  const value = 5;

  console.time('testClassicConditionFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {};
    if (value)
        a.b = value;
  }
  console.timeEnd('testClassicConditionFulfilled');
}

function testClassicConditionNotFulfilled() {
  const value = undefined;

  console.time('testClassicConditionNotFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {};
    if (value)
        a.b = value;
  }
  console.timeEnd('testClassicConditionNotFulfilled');
}

testClassicConditionFulfilled(); // ~ 234.9ms
testClassicConditionNotFulfilled(); // ~493.1ms
testSpreadOperatorConditionFulfilled(); // ~2649.4ms
testSpreadOperatorConditionNotFulfilled(); // ~2278.0ms

Answer 4

Mehr vereinfacht,

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

Answer 5

Wie wäre es, wenn Sie Enhanced Object Properties verwenden und die Eigenschaft nur dann setzen, wenn sie wahrheitsgemäß ist, z. B.:

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

Wenn also die Bedingung nicht erfüllt ist, wird die bevorzugte Eigenschaft nicht erstellt und kann daher verworfen werden. Siehe: http://es6-features.org/#ComputedPropertyNames

UPDATE : Noch besser ist es, dem Ansatz von Axel Rauschmayer in seinem Blogartikel ü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'} : {})
};

Das hat mir sehr geholfen.