JavaScript中(myVar && {myVar})与{myVar}的差异及用法疑问

先看你给出的代码：const myVar未赋值，默认是undefined，这时候两种写法结果完全不同——直接写{myVar}会得到{ myVar: undefined }，而myVar && {myVar}会得到undefined。核心差异在于当myVar为假值时的行为：

具体差异对比 #

1. 当myVar为真值（比如123、'abc'、{}） #

两种写法结果完全一致：都会创建一个包含myVar属性的对象，属性值就是myVar的当前值。例如：

const myVar = 'hello';
const obj1 = {myVar}; // { myVar: 'hello' }
const obj2 = myVar && {myVar}; // { myVar: 'hello' }

2. 当myVar为假值（undefined、null、false、0、''、NaN） #

• 直接写法{myVar}：不管myVar是什么假值，都会强制创建对象，属性值为对应的假值。比如：

  const myVar = null;
  const obj = {myVar}; // { myVar: null }
  

• 短路写法myVar && {myVar}：利用JS的短路求值特性，假值会直接被返回，不会创建对象。比如：

  const myVar = null;
  const obj = myVar && {myVar}; // null
  

为什么要使用短路写法？ #

这种写法主要用于仅在myVar有有效（真值）值时才生成对象的场景：

• 比如处理后端返回的可选字段：如果某个字段可能不存在（为undefined），你不想生成一个包含该字段且值为undefined的冗余对象，而是直接返回undefined，后续代码可以通过if (myObj)快速判断是否有有效数据。
• 简化条件逻辑：后续不需要再额外判断对象属性是否有效，直接判断myObj本身即可。

内容的提问来源于stack exchange，提问作者Gangula