ใน 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 เป็นวิธีที่ดีกว่า แต่เราสามารถเพิ่มน้ำตาลได้อีกเล็กน้อยโดยใช้ตัวดำเนินการสเปรดและการประเมินตรรกะและลัดวงจร:

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 ปรับเปลี่ยนอาร์กิวเมนต์แรกในสถานที่ แต่ก็ส่งกลับวัตถุที่อัปเดต: ดังนั้นคุณสามารถใช้วิธีนี้ในการแสดงออกที่ใหญ่กว่าที่จัดการกับวัตถุต่อไป
• แทนที่จะให้nullคุณผ่านundefinedหรือ{}ด้วยผลลัพธ์เดียวกัน คุณยังสามารถให้0แทนเพราะค่าดั้งเดิมถูกห่อและNumberไม่มีคุณสมบัตินับตัวเอง

รัดกุมยิ่งขึ้น

การจุดที่สองต่อไปคุณสามารถย่อดังนี้ (ตาม @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);

การใช้ไวยากรณ์การแพร่กระจายกับบูลีน (ตามที่แนะนำที่นี่) ไม่ใช่ไวยากรณ์ที่ถูกต้อง สเปรดสามารถใช้ได้กับ iterablesเท่านั้น

ฉันขอแนะนำดังต่อไปนี้:

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

สิ่งที่เกี่ยวกับการใช้คุณสมบัติวัตถุที่ได้รับการปรับปรุงและตั้งค่าคุณสมบัติเฉพาะถ้าเป็นความจริงเช่น:

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

ดังนั้นหากเงื่อนไขไม่ตรงตามเงื่อนไขจะไม่สร้างคุณสมบัติที่ต้องการและทำให้คุณสามารถยกเลิกได้ ดู: http://es6-features.org/#ComputedPropertyNames

UPDATE: เป็นการดียิ่งขึ้นที่จะปฏิบัติตามแนวทางของ Axel Rauschmayer ในบทความบล็อกของเขาเกี่ยวกับการเพิ่มรายการในตัวอักษรและอาร์เรย์ของวัตถุตามเงื่อนไข ( http://2ality.com/2017/04/conditional-literal-entries.html ):

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

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

ค่อนข้างช่วยฉันมาก

ง่ายขึ้น

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

หากเป้าหมายคือให้วัตถุปรากฏในตัวและอยู่ในวงเล็บหนึ่งชุดคุณสามารถลองทำสิ่งนี้:

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 บรรทัดในตอนท้าย

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

แก้ไขด้วยรุ่นรหัสบรรทัดเดียว

การใช้ห้องสมุด 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ของที่มีค่าของa undefinedง่ายพอที่จะเพิ่มการundefinedตรวจสอบด้วยการใช้งานforลูปกับinโอเปอเรเตอร์ แต่อย่างไรก็ตามคุณสามารถเขียนฟังก์ชันเพื่อกรองundefinedสมาชิกได้อย่างง่ายดาย

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. ถ้าทั้งเงื่อนไข B & conditionC คือ trueเช่นนั้นa = { b: 4, c: 5 }
3. ถ้าทั้งเงื่อนไข B & conditionC คือ falseเช่นนั้นa = {}