W JavaScript, jak warunkowo dodać członka do obiektu?

Chciałbym utworzyć obiekt z członkiem dodanym warunkowo. Proste podejście to:

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

Teraz chciałbym napisać bardziej idiomatyczny kod. Próbuję:

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

Ale teraz bjest członkiem, aktórego wartość jest undefined. To nie jest pożądany wynik.

Czy istnieje przydatne rozwiązanie?

Aktualizacja

Szukam rozwiązania, które mogłoby poradzić sobie z ogólną sprawą z udziałem kilku członków.

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

W czystym JavaScript nie mogę wymyślić nic bardziej idiomatycznego niż twój pierwszy fragment kodu.

Jeśli jednak użycie biblioteki jQuery nie wchodzi w rachubę, to $ .extend () powinno spełniać twoje wymagania, ponieważ, jak wynika z dokumentacji:

Niezdefiniowane właściwości nie są kopiowane.

Dlatego możesz napisać:

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

I uzyskaj oczekiwane wyniki (jeśli conditionBtak false, to bnie będą istnieć w a).

Myślę, że @InspiredJW zrobił to z ES5 i jak zauważył @trincot, użycie es6 jest lepszym podejściem. Ale możemy dodać nieco więcej cukru, używając operatora spreadu i logicznej ORAZ oceny zwarcia:

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

Z EcmaScript2015 możesz używać 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);

Kilka uwag:

• Object.assign modyfikuje pierwszy argument na miejscu, ale zwraca również zaktualizowany obiekt: dzięki czemu można użyć tej metody w większym wyrażeniu, które dalej manipuluje obiektem.
• Zamiast nullciebie możesz przejść undefinedlub {}, z tym samym rezultatem. Możesz nawet podać 0zamiast tego, ponieważ pierwotne wartości są opakowane i Numbernie mają własnych właściwości, które można wyliczyć .

Jeszcze bardziej zwięzłe

Biorąc drugi punkt dalej, można go skrócić następująco (jak @Jamie wskazał), jako wartości falsy nie mają własnych właściwości przeliczalny ( false, 0, NaN, null, undefined, '', z wyjątkiem 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
}

Demo na żywo:

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

console.log(obj);

Używanie składni rozszerzonej z wartością logiczną (jak sugerowano tutaj) nie jest prawidłową składnią. Spread można stosować tylko z iterami .

Proponuję następujące:

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

A co z korzystaniem z Ulepszonych właściwości obiektu i ustawianie właściwości tylko wtedy, gdy jest to zgodne z prawdą, np .:

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

Jeśli więc warunek nie jest spełniony, nie tworzy preferowanej właściwości i dlatego możesz ją odrzucić. Zobacz: http://es6-features.org/#ComputedPropertyNames

AKTUALIZACJA: Jeszcze lepiej jest podążać za podejściem Axela Rauschmayera w jego blogu na temat warunkowego dodawania wpisów do literałów obiektów i tablic ( http://2ality.com/2017/04/conditional-literal-entries.html ):

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

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

Bardzo mi pomogło.

bardziej uproszczony,

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

Jeśli celem jest, aby obiekt wyglądał na niezależny i znajdował się w jednym zestawie nawiasów klamrowych, możesz spróbować:

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

    if (conditionC)
        this.c = 5;

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

Jeśli chcesz zrobić to po stronie serwera (bez jquery), możesz użyć lodash 4.3.0:

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

I to działa przy użyciu 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.
}

Mam nadzieję, że jest to bardzo skuteczny sposób dodawania wpisu na podstawie warunku. Aby uzyskać więcej informacji na temat warunkowego dodawania wpisów do literałów obiektowych.

Od dawna już na nie odpowiedziano, ale patrząc na inne pomysły wpadłem na interesującą pochodną:

Przypisz niezdefiniowane wartości do tej samej właściwości, a następnie usuń ją

Utwórz obiekt za pomocą anonimowego konstruktora i zawsze przypisuj niezdefiniowane elementy do tego samego elementu zastępczego, który usuwasz na samym końcu. To da ci jedną linię (mam nadzieję, że nie jest zbyt złożona) na członka + 1 dodatkową linię na końcu.

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

Możesz dodać wszystkie swoje niezdefiniowane wartości bez warunków, a następnie użyć ich JSON.stringifydo usunięcia wszystkich:

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

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

// Contents of cleaned:

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

Zrobiłbym to

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

Edytowane z jedną wersją kodu linii

Korzystając z biblioteki lodash, możesz użyć _.omitBy

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

Jest to przydatne, gdy masz opcjonalne żądania

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

Myślę, że twoje pierwsze podejście do warunkowego dodawania członków jest w porządku. Naprawdę nie zgadzam się z tym, że nie chcę mieć członka bo awartości undefined. Wystarczy dodać undefinedczek z użyciem forpętli z inoperatorem. Ale w każdym razie możesz łatwo napisać funkcję do odfiltrowywania undefinedczłonków.

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

Możesz także użyć deleteoperatora do edycji obiektu na miejscu.

Zawiń w obiekt

Coś takiego jest nieco czystsze

 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)

Zawiń w tablicę

Lub jeśli chcesz skorzystać z metody Jamiego Hilla i mieć bardzo długą listę warunków, musisz napisać ...składnię wiele razy. Aby było trochę czystsze, możesz po prostu owinąć je w tablicę, a następnie użyć, reduce()aby zwrócić je jako pojedynczy obiekt.

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

Lub używając map()funkcji

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

To najbardziej zwięzłe rozwiązanie, jakie mogę wymyślić:

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

Korzystając z biblioteki lodash, możesz użyć _.merge

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

1. Jeśli warunek B to false& warunek C to true, toa = { c: 5 }
2. Jeśli oba warunki B i C są true, toa = { b: 4, c: 5 }
3. Jeśli oba warunki B i C są false, toa = {}