Dalam Javascript, bagaimana cara menambahkan anggota secara kondisional ke suatu objek?

Saya ingin membuat objek dengan anggota ditambahkan kondisional. Pendekatan sederhana adalah:

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

Sekarang, saya ingin menulis kode yang lebih idiomatis. Aku sedang mencoba:

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

Tapi sekarang, badalah anggota ayang nilainya undefined. Ini bukan hasil yang diinginkan.

Apakah ada solusi praktis?

Memperbarui

Saya mencari solusi yang dapat menangani kasus umum dengan beberapa anggota.

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

Dalam Javascript murni, saya tidak bisa memikirkan hal yang lebih idiomatis daripada cuplikan kode pertama Anda.

Namun, jika menggunakan perpustakaan jQuery tidak keluar dari pertanyaan, maka $ .extend () harus memenuhi persyaratan Anda karena, seperti yang dikatakan dalam dokumentasi:

Properti yang tidak terdefinisi tidak disalin.

Karena itu, Anda dapat menulis:

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

Dan dapatkan hasil yang Anda harapkan (jika conditionBada false, maka btidak akan ada dalam a).

Saya pikir @InspiredJW melakukannya dengan ES5, dan seperti yang ditunjukkan @trincot, menggunakan es6 adalah pendekatan yang lebih baik. Tetapi kita dapat menambahkan sedikit lebih banyak gula, dengan menggunakan operator penyebaran, dan evaluasi hubungan pendek DAN logis:

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

Dengan EcmaScript2015 Anda dapat menggunakan 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);

Beberapa komentar:

• Object.assign memodifikasi argumen pertama di tempat, tetapi juga mengembalikan objek yang diperbarui: sehingga Anda dapat menggunakan metode ini dalam ekspresi yang lebih besar yang selanjutnya memanipulasi objek.
• Alih-alih nullAnda bisa lulus undefinedatau {}, dengan hasil yang sama. Anda bahkan bisa memberikan 0, karena nilai primitif dibungkus, dan Numbertidak memiliki properti enumerable sendiri .

Bahkan lebih ringkas

Mengambil titik kedua lebih lanjut, Anda bisa mempersingkat sebagai berikut (sebagai @Jamie memiliki keluar runcing), sebagai nilai-nilai falsy tidak memiliki sifat enumerable sendiri ( false, 0, NaN, null, undefined, '', kecuali 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 Langsung:

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

console.log(obj);

Menggunakan sintaks spread dengan boolean (seperti yang disarankan di sini) bukan sintaks yang valid. Spread hanya dapat digunakan dengan iterables .

Saya menyarankan yang berikut ini:

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

Bagaimana dengan menggunakan Properti Objek yang Ditingkatkan dan hanya mengatur properti jika itu benar, misalnya:

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

Jadi jika kondisinya tidak terpenuhi, itu tidak menciptakan properti yang disukai dan dengan demikian Anda dapat membuangnya. Lihat: http://es6-features.org/#ComputedPropertyNames

UPDATE: Bahkan lebih baik untuk mengikuti pendekatan Axel Rauschmayer dalam artikel blognya tentang menambahkan entri dalam kondisi literal dan array objek ( http://2ality.com/2017/04/conditional-literal-entries.html ):

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

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

Cukup banyak membantu saya.

lebih disederhanakan,

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

Jika tujuannya adalah agar objek tampak mandiri dan berada dalam satu set kawat gigi, Anda dapat mencoba ini:

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

    if (conditionC)
        this.c = 5;

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

Jika Anda ingin melakukan sisi server ini (tanpa jquery), Anda dapat menggunakan lodash 4.3.0:

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

Dan ini berfungsi menggunakan 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.
}

Saya harap ini adalah cara yang lebih efisien untuk menambahkan entri berdasarkan kondisinya. Untuk info lebih lanjut tentang cara menambahkan entri secara kondisional ke dalam objek literal.

Ini sudah lama dijawab, tetapi melihat ide-ide lain saya menemukan beberapa turunan yang menarik:

Tetapkan nilai yang tidak terdefinisi ke properti yang sama dan hapus setelahnya

Buat objek Anda menggunakan konstruktor anonim dan selalu tetapkan anggota yang tidak ditentukan untuk anggota boneka yang sama yang Anda hapus di bagian paling akhir. Ini akan memberi Anda satu baris (saya harap tidak terlalu rumit) per anggota + 1 baris tambahan di akhir.

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

Anda dapat menambahkan semua nilai yang tidak ditentukan tanpa kondisi dan kemudian gunakan JSON.stringifyuntuk menghapus semuanya:

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

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

// Contents of cleaned:

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

Saya akan melakukan ini

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

Diedit dengan satu versi kode baris

Menggunakan perpustakaan lodash, Anda dapat menggunakan _.omitBy

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

Hasil ini berguna ketika Anda memiliki permintaan yang opsional

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

Saya pikir pendekatan pertama Anda untuk menambahkan anggota dengan syarat baik-baik saja. Aku tidak benar-benar setuju dengan tidak ingin memiliki anggota bdari adengan nilai undefined. Ini cukup sederhana untuk menambahkan undefinedcek dengan penggunaan forloop dengan inoperator. Tapi bagaimanapun, Anda dapat dengan mudah menulis fungsi untuk menyaring undefinedanggota.

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

Anda juga dapat menggunakan deleteoperator untuk mengedit objek di tempatnya.

Bungkus menjadi sebuah objek

Sesuatu seperti ini agak lebih bersih

 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)

Bungkus menjadi sebuah array

Atau jika Anda ingin menggunakan metode Jamie Hill dan memiliki daftar syarat yang sangat panjang maka Anda harus menulis ...sintaks beberapa kali. Untuk membuatnya sedikit lebih bersih, Anda bisa membungkusnya menjadi sebuah array, lalu gunakan reduce()untuk mengembalikannya sebagai objek tunggal.

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

Atau menggunakan map()fungsi

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

Ini adalah solusi paling ringkas yang bisa saya buat:

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

Tetapkan var dengan letdan hanya menetapkan properti baru

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",
      },
    ];
}

Sekarang msgmenjadi

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

Menurut saya ini adalah solusi yang sangat sederhana dan mudah.

Menggunakan perpustakaan lodash, Anda bisa menggunakan _.merge

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

1. Jika conditionB adalah false& conditionC adalahtrue , makaa = { c: 5 }
2. Jika keduanya conditionB & conditionC adalah true, makaa = { b: 4, c: 5 }
3. Jika kedua conditionB & conditionC adalah false, makaa = {}