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

Posted 2023-02-23

【中文标题】ES6/ES7 中“可选”对象键的简洁/简洁语法？

【英文标题】：Succinct/concise syntax for 'optional' object keys in 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?

【参考方案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 属性，而不是将它们与不存在的属性区分开来。