Succinct/concise 'optional' 对象键在 ES6/ES7 中的语法？

Question

ES6/ES7中已经有很多cool features用于定义Javascript对象。但是，以下模式在 Javascript 中很常见：

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

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

有没有办法同时使用可选键和必需键同时定义对象？

Answer 1

表示optional键，可以赋值给它null，如果条件为false

const someCondition = true;

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

console.log(obj);

Answer 2

您可以使用 object spread 来获得可选的属性:

let flag1 = true;
let flag2 = false;

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

console.log(obj);

Answer 3

the following pattern is common in Javascript

不应该。拥有许多不同形状的对象会导致性能下降。记录应始终包含相同的键。所以只需使用

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

Succinct/concise 'optional' 对象键在 ES6/ES7 中的语法？

Succinct/concise syntax for 'optional' object keys in ES6/ES7?

javascript

object

ecmascript-6

ecmascript-2016

ecmascript-next