Trong Javascript, làm thế nào để có điều kiện thêm một thành viên vào một đối tượng?

Tôi muốn tạo một đối tượng với một thành viên được thêm vào một cách có điều kiện. Cách tiếp cận đơn giản là:

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

Bây giờ, tôi muốn viết một mã thành ngữ hơn. Tôi đang cố gắng:

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

Nhưng bây giờ, blà một thành viên củaa có giá trị là undefined. Đây không phải là kết quả mong muốn.

Có một giải pháp tiện dụng?

Cập nhật

Tôi tìm kiếm một giải pháp có thể xử lý trường hợp chung với một số thành viên.

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

Trong Javascript thuần túy, tôi không thể nghĩ bất cứ điều gì thành ngữ hơn đoạn mã đầu tiên của bạn.

Tuy nhiên, nếu sử dụng thư viện jQuery không nằm ngoài câu hỏi đó, thì $ .extend () sẽ đáp ứng các yêu cầu của bạn bởi vì, như tài liệu nói:

Thuộc tính không xác định không được sao chép.

Do đó, bạn có thể viết:

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

Và có được kết quả mà bạn mong đợi (nếu conditionBcó false, thì bsẽ không tồn tại a).

Tôi nghĩ rằng @InspiredJW đã làm điều đó với ES5 và như @trincot đã chỉ ra, sử dụng es6 là một cách tiếp cận tốt hơn. Nhưng chúng ta có thể thêm một chút đường, bằng cách sử dụng toán tử trải và đánh giá logic và ngắn mạch:

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

Với EcmaScript2015 bạn có thể sử dụng 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);

Một số nhận xét:

• Object.assign sửa đổi đối số đầu tiên tại chỗ, nhưng nó cũng trả về đối tượng được cập nhật: vì vậy bạn có thể sử dụng phương thức này trong một biểu thức lớn hơn để thao tác thêm đối tượng.
• Thay vì nullbạn có thể vượt qua undefinedhoặc {}, với kết quả tương tự. Bạn thậm chí có thể cung cấp 0thay thế, bởi vì các giá trị nguyên thủy được bao bọc và Numberkhông có thuộc tính vô số riêng .

Thậm chí ngắn gọn hơn

Lấy điểm thứ hai hơn nữa, bạn có thể rút ngắn nó như sau (như @Jamie có ra nhọn), như các giá trị falsy không có thuộc tính đếm riêng ( false, 0, NaN, null, undefined, '', ngoại trừ 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
}

Bản thử trực tiếp:

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

console.log(obj);

Sử dụng cú pháp lây lan với boolean (như được đề xuất ở đây) không phải là cú pháp hợp lệ. Lan truyền chỉ có thể được sử dụng với iterables .

Tôi đề nghị như sau:

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

Điều gì về việc sử dụng Thuộc tính đối tượng nâng cao và chỉ đặt thuộc tính nếu nó là sự thật, ví dụ:

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

Vì vậy, nếu điều kiện không được đáp ứng, nó không tạo ra thuộc tính ưa thích và do đó bạn có thể loại bỏ nó. Xem: http://es6-features.org/#ComputingPropertyNames

CẬP NHẬT: Thậm chí còn tốt hơn khi làm theo cách tiếp cận của Axel Rauschmayer trong bài viết trên blog của anh ấy về việc thêm điều kiện vào bên trong các đối tượng bằng chữ và mảng ( http://2ality.com/2017/04/conditable-literal-entries.html ):

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

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

Khá giúp tôi rất nhiều.

đơn giản hơn,

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

Nếu mục tiêu là để đối tượng xuất hiện khép kín và nằm trong một bộ niềng răng, bạn có thể thử điều này:

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

    if (conditionC)
        this.c = 5;

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

Nếu bạn muốn làm phía máy chủ này (không có jquery), bạn có thể sử dụng lodash 4.3.0:

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

Và điều này hoạt động bằng cách sử dụng 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.
}

Tôi hy vọng đây là cách hiệu quả hơn để thêm một mục dựa trên điều kiện. Để biết thêm thông tin về cách thêm điều kiện vào các mục bên trong một đối tượng bằng chữ.

Điều này đã được trả lời từ lâu, nhưng nhìn vào những ý tưởng khác tôi đã nghĩ ra một số dẫn xuất thú vị:

Gán các giá trị không xác định cho cùng một thuộc tính và xóa nó sau đó

Tạo đối tượng của bạn bằng cách sử dụng một hàm tạo ẩn danh và luôn gán các thành viên không xác định cho cùng một thành viên giả mà bạn xóa ở cuối. Điều này sẽ cung cấp cho bạn một dòng duy nhất (không quá phức tạp tôi hy vọng) cho mỗi thành viên + 1 dòng bổ sung vào cuối.

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

Bạn có thể thêm tất cả các giá trị không xác định của mình mà không cần điều kiện và sau đó sử dụng JSON.stringifyđể xóa tất cả chúng:

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

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

// Contents of cleaned:

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

Tôi sẽ làm điều này

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

Được chỉnh sửa với phiên bản mã một dòng

Sử dụng thư viện lodash, bạn có thể sử dụng _.omitBy

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

Kết quả này có ích khi bạn có các yêu cầu không bắt buộc

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

Tôi nghĩ rằng cách tiếp cận đầu tiên của bạn để thêm thành viên có điều kiện là hoàn toàn tốt. Tôi không thực sự đồng ý với không muốn có một thành viên bcủa amột giá trị undefined. Nó đủ đơn giản để thêm một undefinedkiểm tra với việc sử dụng forvòng lặp với intoán tử. Nhưng dù sao, bạn có thể dễ dàng viết một chức năng để lọc ra undefinedcác thành viên.

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

Bạn cũng có thể sử dụng deletetoán tử để chỉnh sửa đối tượng tại chỗ.

Quấn vào một vật

Một cái gì đó như thế này là một chút sạch sẽ hơn

 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)

Gói thành một mảng

Hoặc nếu bạn muốn sử dụng phương pháp của Jamie Hill và có một danh sách các điều kiện rất dài thì bạn phải viết ...cú pháp nhiều lần. Để làm cho nó sạch hơn một chút, bạn có thể chỉ cần bọc chúng thành một mảng, sau đó sử dụng reduce()để trả về chúng dưới dạng một đối tượng.

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

Hoặc sử dụng map()chức năng

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

Đây là giải pháp ngắn gọn nhất mà tôi có thể đưa ra:

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

Sử dụng thư viện lodash, bạn có thể sử dụng _.merge

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

1. Nếu conditionB là false& conditionC thì true,a = { c: 5 }
2. Nếu cả hai điều kiệnB & conditionC là true, thìa = { b: 4, c: 5 }
3. Nếu cả hai điều kiệnB & conditionC là false, thìa = {}