Cú pháp ngắn gọn/súc tích cho các khóa đối tượng 'tùy chọn' trong ES6/ES7?

Question

Đã có rất nhiều cool features trong ES6/ES7 để xác định đối tượng Javascript. Tuy nhiên, mẫu sau phổ biến trong Javascript:

const obj = { 
    requiredKey1: ..., 
    requiredKey2: ... 
}; 

if (someCondition) { 
    obj.optionalKey1 = ...; 
} 

Có cách nào để xác định đối tượng cùng một lúc với cả khóa tùy chọn và bắt buộc không?

Answer 1

Bạn có thể sử dụng object spread để có một tài sản không bắt buộc.

Lưu ý: Đối tượng Rest/Spread là đề xuất giai đoạn 3 cho ECMAScript. Có thể bạn sẽ cần babel transform để sử dụng.

let flag1 = true; 
 
let flag2 = false; 
 

 
const obj = { 
 
    requiredKey1: 1, 
 
    requiredKey2: 2, 
 
    ...(flag1 && { optionalKey1: 5 }), 
 
    ...(flag2 && { optionalKey2: 6, optionalKey2: 7 }), 
 
    ...(flag1 && { optionalKey4: 8, optionalKey5: 9 }) 
 
}; 
 

 
console.log(obj);

Answer 2

Để chỉ ra optional quan trọng, bạn có thể gán cho nó null, nếu điều kiện là sai

const someCondition = true; 
 

 
const obj = { 
 
    requiredKey1: 1, 
 
    requiredKey2: 2, 
 
    optionalKey1: someCondition ? 'optional' : null 
 
}; 
 

 
console.log(obj);

Answer 3

mẫu sau là phổ biến trong javascript

Nó không nên. Có nhiều đối tượng có hình dạng khác nhau có thể phải chịu một hình phạt về hiệu suất. Các bản ghi phải luôn chứa cùng một khóa. Vì vậy, chỉ cần sử dụng

const obj = { 
    requiredKey1: …, 
    requiredKey2: …, 
    optionalKey1: someCondition ? … : undefined, 
};