JavaScriptで、オブジェクトにメンバーを条件付きで追加するにはどうすればよいですか？

条件付きでメンバーを追加したオブジェクトを作成したいと思います。簡単なアプローチは次のとおりです。

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

今、私はより慣用的なコードを書きたいと思います。やっています：

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

しかし、現在、その値がのbメンバーaですundefined。これは望ましい結果ではありません。

便利な解決策はありますか？

更新

複数のメンバーがいる一般的なケースを処理できるソリューションを探しています。

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

純粋なJavascriptでは、最初のコードスニペットほど慣用的なものは考えられません。

ただし、jQueryライブラリの使用が問題にならない場合は、ドキュメントに記載されているように、$。extend（）が要件を満たす必要があります。

未定義のプロパティはコピーされません。

したがって、次のように書くことができます。

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

そして、（あればあなたが期待する結果を得ることconditionBでfalse、そのb中には存在しませんa）。

@InspiredJWはES5でそれを行ったと思います。@ trincotが指摘したように、es6を使用する方がより良いアプローチです。ただし、spread演算子と論理AND短絡評価を使用して、もう少し砂糖を追加できます。

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

EcmaScript2015を使用すると、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);

いくつかの備考：

• Object.assign 最初の引数をインプレースで変更しますが、更新されたオブジェクトも返します。そのため、オブジェクトをさらに操作するより大きな式でこのメソッドを使用できます。
• の代わりにorをnull渡すと、同じ結果になります。プリミティブ値はラップされており、独自の列挙可能なプロパティがないため、代わりに提供することもできます。undefined{}0Number

さらに簡潔

（@Jamieは尖ったアウトを持っているとして）falsy値は全く独自の列挙可能な特性を持っていないとして、（次のようにさらに第二の点を取ると、あなたはそれを短縮することができfalse、0、NaN、null、undefined、''を除きます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
}

ライブデモ：

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

console.log(obj);

（ここで提案されているように）ブール値で拡散構文を使用することは有効な構文ではありません。Spreadは、イテラブルでのみ使用できます。

私は以下を提案します：

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

拡張オブジェクトプロパティの使用についてはどうですか。それが真実である場合にのみプロパティを設定します。例：

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

したがって、条件が満たされない場合、優先プロパティは作成されないため、破棄できます。参照：http : //es6-features.org/#ComputedPropertyNames

更新： 条件付きでオブジェクトリテラルと配列内にエントリを追加することに関する彼のブログ記事（http://2ality.com/2017/04/conditional-literal-entries.html）のAxel Rauschmayerのアプローチに従うのがさらに良いです：

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

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

かなり助けてくれました。

より簡素化され、

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

目的がオブジェクトを自己完結的に表示し、1組のブレース内に収めることである場合は、次のように試すことができます。

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

    if (conditionC)
        this.c = 5;

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

このサーバーサイド（jqueryなし）を実行する場合は、lodash 4.3.0を使用できます。

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

そして、これは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.
}

これが条件に基づいてエントリを追加する最も効率的な方法であることを願っています。オブジェクトリテラル内にエントリを条件付きで追加する方法の詳細については。

これは長い間回答されてきましたが、他のアイデアを見て、私はいくつかの興味深い派生物を思いつきました：

未定義の値を同じプロパティに割り当て、後で削除する

匿名コンストラクタを使用してオブジェクトを作成し、最後に削除する同じダミーメンバーに常に未定義のメンバーを割り当てます。これにより、メンバーごとに1行（あまり複雑ではない）と最後に1行追加されます。

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

条件なしですべての未定義の値を追加し、を使用JSON.stringifyしてそれらをすべて削除できます。

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

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

// Contents of cleaned:

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

私はこれをします

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

1行のコードバージョンで編集

lodashライブラリを使用すると、_。omitByを使用できます

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

これは、オプションのリクエストがある場合に便利です

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

条件付きでメンバーを追加するあなたの最初のアプローチは完全に素晴らしいと思います。の値を持つのメンバーbを希望しないことに本当に同意しません。演算子でループを使用してチェックを追加するのは簡単です。しかし、とにかく、メンバーをフィルターで除外する関数を簡単に作成できます。aundefinedundefinedforinundefined

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

delete演算子を使用してオブジェクトを編集することもできます。

オブジェクトに包み込む

このようなものは少しきれいです

 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)

配列にラップする

または、Jamie Hillの方法を使用し、条件のリストが非常に長い場合は、...構文を複数回記述する必要があります。少しきれいにするには、それらを配列にラップしてreduce()から、を使用してそれらを単一のオブジェクトとして返すことができます。

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

またはmap()関数を使用して

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

これは私が思いつくことができる最も簡潔な解決策です：

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

lodashライブラリを使用すると、_。mergeを使用できます

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

1. conditionBがfalse＆conditionCがのtrue場合、a = { c: 5 }
2. conditionBとconditionCの両方がのtrue場合、a = { b: 4, c: 5 }
3. conditionBとconditionCの両方がのfalse場合、a = {}