为何JavaScript对象展开运算符可正常处理值为undefined的属性

你疑惑的两行展开逻辑，本质是结合JavaScript两个基础语言特性实现的简洁分支效果：

• 逻辑与&&的短路求值规则
  逻辑与运算会从左到右依次判断操作数，一旦遇到第一个假值（比如undefined、null、0、空字符串等），就会直接返回这个假值，不再执行后续运算；只有当左侧所有操作数都为真值时，才会返回最后一个操作数的结果。
• 对象展开运算符...的边界容错规则
  展开运算符在拷贝对象属性时，如果传入的待展开值是undefined、null这类非对象值，会直接跳过整个展开步骤，不会给目标对象新增任何属性，也不会触发报错。

对应代码的实际执行流程 #

拿size属性的处理逻辑...(obj.size && { size: ${obj.size}cm })举例：

1. 当原对象没有size属性、值为undefined时
   先计算括号内的表达式：左侧obj.size是undefined（属于假值），触发短路规则，整个表达式直接返回undefined。此时执行展开操作，因为待展开值是undefined，会直接跳过这一步，最终返回的对象里不会新增size键，完全符合需求。
2. 当原对象存在size属性、且为有效数值时
   括号内表达式的左侧obj.size是真值，不触发短路，整个表达式会返回后续构造的{ size: "对应值+cm" }对象。此时执行展开操作，就会把这个对象里的size属性正常拷贝到最终返回对象中，完成属性的单位格式化。

weight属性的处理逻辑和size完全独立，两个分支互不干扰，不需要像多层if那样枚举所有“有size没weight、有weight没size、两个都有”的组合场景，代码更精简。

补充实际开发的注意点：这种写法的小局限是，如果size或weight的值是0、空字符串这类假值，会被直接判定为不存在。如果需要严格按照“属性是否在对象上存在”判断（不管属性值是不是假值），可以把表达式调整为...('size' in obj && { size: ${obj.size}cm })，逻辑会更严谨。

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