ES6/ES7 中“可选”对象键的简洁/简洁语法？答案

【问题标题】：Succinct/concise syntax for 'optional' object keys in ES6/ES7?ES6/ES7 中“可选”对象键的简洁/简洁语法？
【发布时间】：2020-09-24 15:00:23
【问题描述】：

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

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

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

有没有一种方法可以同时使用可选键和必需键同时定义对象？

【问题讨论】：

为什么不直接使用三元呢？ optionKey1: someCondition ? value : undefined?
@FelixKling 我认为这在很大程度上是理论上的区别，因为在节点/浏览器环境中没有实现“完整”的 ES6 或 ES7 标准，而且大多数人都在使用转译器。
好吧，它定义了答案的范围。我们不知道你在用什么。此外，我不希望人们误用 ES7 一词来表示实验性功能。
@FelixKling 我在询问 Ecmascript 的任何标准；显然现有的支持标准更好。如果这可以通过实验性功能来完成，好吧。如果可以用 ES6 或 ES7 完成，那就更好了。如果 ES5 有可能，那就太棒了！
我希望看到类似{ key?: optionalValue } 或属性简写：{ optionalValue? }

标签： javascript object ecmascript-6 ecmascript-2016 ecmascript-next

【解决方案1】：

表示optional键，如果条件为假，你可以分配给它null

const someCondition = true;

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

console.log(obj);

【讨论】：

好答案，但值得注意的是，通过这样做，optionalKey1 在条件为假（并且值为 null）时仍然显示为对象的键之一，而 OP 的原始 sn-如果条件为假，p 将创建一个完全没有键的对象。
我认为，将null 分配给属性更容易理解，因为它是可选的并且没有比检查存在的价值
我个人希望得到某种错误，通常是一种语言（尤其是 JavaScript）在尝试访问不存在的属性时会给我的任何行为，而不是让它可以为空，因为它是永远不会有一个值，这与可空值的用途不同 - 它需要存在，它存在。如果它不需要退出，它就不需要 - 我认为这更有意义。

【解决方案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);

【讨论】：

注意：这将使任何 getter 变成静态值。
请注意，您不需要括号。例如。 ...flag1 && { optionalKey1: 5 }, 也可以。
@RyanKing 你能给个样品吗？ {get x() {return this.a + this.b}, b: 2, ...a && {a}} 按预期工作
@zb' { ...{ get x() { return 3 } } }
@RyanKing 啊，可选的 getter ;) o'c 你不能破坏 getter ;)

【解决方案3】：

以下模式在 Javascript 中很常见

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

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

【讨论】：

该模式在作为选项传递的对象中非常有用。
@krulik 选项对象参数通常可以完全处理undefined 属性，而不是将它们与不存在的属性区分开来。