En Javascript, comment ajouter conditionnellement un membre à un objet?

Je voudrais créer un objet avec un membre ajouté conditionnellement. L'approche simple est:

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

Maintenant, je voudrais écrire un code plus idiomatique. J'essaie:

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

Mais maintenant, best un membre adont la valeur est undefined. Ce n'est pas le résultat souhaité.

Existe-t-il une solution pratique?

Mise à jour

Je recherche une solution qui pourrait traiter le cas général avec plusieurs membres.

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

En pur Javascript, je ne vois rien de plus idiomatique que votre premier extrait de code.

Si, cependant, l'utilisation de la bibliothèque jQuery n'est pas hors de question, alors $ .extend () devrait répondre à vos exigences car, comme le dit la documentation:

Les propriétés non définies ne sont pas copiées.

Par conséquent, vous pouvez écrire:

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

Et obtenez les résultats que vous attendez (si conditionBc'est le cas false, alors bils n'existeront pas a).

Je pense que @InspiredJW l'a fait avec ES5, et comme l'a souligné @trincot, utiliser es6 est une meilleure approche. Mais nous pouvons ajouter un peu plus de sucre, en utilisant l'opérateur d'étalement, et une évaluation logique ET en court-circuit:

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

Avec EcmaScript2015, vous pouvez utiliser 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);

Quelques remarques:

• Object.assign modifie le premier argument sur place, mais il renvoie également l'objet mis à jour: vous pouvez donc utiliser cette méthode dans une expression plus grande qui manipule davantage l'objet.
• Au lieu de nullvous pourriez passer undefinedou {}, avec le même résultat. Vous pouvez même fournir à la 0place, car les valeurs primitives sont encapsulées et Numbern'ont pas de propriétés énumérables propres .

Encore plus concis

En prenant le deuxième point plus loin, vous pouvez le raccourcir comme suit (comme @Jamie a en pointe), en tant que valeurs falsy ont pas propres propriétés dénombrables ( false, 0, NaN, null, undefined, '', à l' exception 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
}

Démo en direct:

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

console.log(obj);

L'utilisation de la syntaxe étendue avec booléen (comme suggéré ici) n'est pas une syntaxe valide. La propagation ne peut être utilisée qu'avec des itérables .

Je suggère ce qui suit:

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

Qu'en est-il de l'utilisation des propriétés d'objet améliorées et ne définissez la propriété que si elle est vraie, par exemple:

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

Donc, si la condition n'est pas remplie, elle ne crée pas la propriété préférée et vous pouvez donc la supprimer. Voir: http://es6-features.org/#ComputedPropertyNames

MISE À JOUR: Il est encore mieux de suivre l'approche d'Axel Rauschmayer dans son article de blog sur l'ajout conditionnel d'entrées à l'intérieur des littéraux et des tableaux d'objets ( http://2ality.com/2017/04/conditional-literal-entries.html ):

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

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

Cela m'a beaucoup aidé.

plus simplifié,

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

Si l'objectif est de faire en sorte que l'objet apparaisse autonome et se trouve dans un ensemble d'accolades, vous pouvez essayer ceci:

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

    if (conditionC)
        this.c = 5;

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

Si vous souhaitez faire cela côté serveur (sans jquery), vous pouvez utiliser lodash 4.3.0:

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

Et cela fonctionne en utilisant 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.
}

J'espère que c'est le moyen le plus efficace d'ajouter une entrée en fonction de la condition. Pour plus d'informations sur l'ajout conditionnel d'entrées à l'intérieur d'un littéral d'objet.

Cela a longtemps été répondu, mais en regardant d'autres idées, j'ai trouvé un dérivé intéressant:

Attribuez des valeurs non définies à la même propriété et supprimez-la ensuite

Créez votre objet à l'aide d'un constructeur anonyme et affectez toujours des membres non définis au même membre factice que vous supprimez à la toute fin. Cela vous donnera une seule ligne (pas trop complexe j'espère) par membre + 1 ligne supplémentaire à la fin.

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

Vous pouvez ajouter toutes vos valeurs indéfinies sans condition, puis utiliser JSON.stringifypour les supprimer toutes:

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

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

// Contents of cleaned:

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

Je ferais ça

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

Modifié avec une version de code de ligne

En utilisant la bibliothèque lodash, vous pouvez utiliser _.omitBy

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

Cela est pratique lorsque vous avez des demandes facultatives

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

Je pense que votre première approche pour ajouter des membres conditionnellement est parfaitement bien. Je ne suis pas d' accord avec ne pas vouloir d'avoir un membre bde aune valeur de undefined. C'est assez simple pour ajouter une undefinedvérification avec l'utilisation d'une forboucle avec l' inopérateur. Mais de toute façon, vous pouvez facilement écrire une fonction pour filtrer les undefinedmembres.

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

Vous pouvez également utiliser l' deleteopérateur pour modifier l'objet en place.

Envelopper dans un objet

Quelque chose comme ça est un peu plus propre

 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)

Envelopper dans un tableau

Ou si vous souhaitez utiliser la méthode de Jamie Hill et avoir une très longue liste de conditions, vous devez écrire la ...syntaxe plusieurs fois. Pour le rendre un peu plus propre, vous pouvez simplement les envelopper dans un tableau, puis les utiliser reduce()pour les renvoyer comme un seul objet.

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

Ou en utilisant la map()fonction

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

C'est la solution la plus succincte que je puisse trouver:

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

Définissez un var par letet attribuez simplement une nouvelle propriété

let msg = {
    to: "[email protected]",
    from: "[email protected]",
    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",
      },
    ];
}

Maintenant, le msgdevenir

{
    to: "[email protected]",
    from: "[email protected]",
    subject: "Contact form",
    attachments: [
      {
        content: "attachment",
        filename: "filename",
        type: "mime_type",
        disposition: "attachment",
      },
    ]
}

À mon avis, c'est une solution très simple et facile.

En utilisant la bibliothèque lodash, vous pouvez utiliser _.merge

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

1. Si conditionB est false& conditionC esttrue , alorsa = { c: 5 }
2. Si les deux conditions B et condition C sont true, alorsa = { b: 4, c: 5 }
3. Si les deux conditions B et condition C le sont false, alorsa = {}