如何在JS的map遍历中优雅地仅将非假值属性加入返回对象？

给你两种常用的简洁实现方式，都可以省去大量重复的if判断：

方案1：短路求值+对象展开（最简洁，适合属性较少的场景） #

利用展开假值到对象不会生成额外属性的特性，直接在对象字面量里按条件插入属性：

map(([reportProperties, reportObjectsProperties, textProperties, visibleText]) => ({
  // 普通属性判断非假值就保留
  ...(reportProperties && { reportProperties }),
  // 数组类型额外判断长度，用可选链避免空值报错
  ...(reportObjectsProperties?.length && { reportObjectsProperties }),
  ...(textProperties && { textProperties }),
  ...(visibleText && { visibleText })
}))

逻辑说明：如果条件判断为真，就返回一个包含对应属性的对象展开到最终结果中；如果条件为假，&& 短路返回假值，展开后不会在最终对象里留下任何属性，完全符合你的需求。

方案2：抽离过滤工具函数（扩展性强，适合属性多、判断逻辑复杂的场景） #

先写一个通用的属性过滤工具函数，后续加属性、改判断规则都不需要调整整体结构：

// 通用属性过滤函数，传入对象和判断规则，只保留符合条件的属性
const pickValidProps = (rawObj, validateFn) => 
  Object.fromEntries(
    Object.entries(rawObj).filter(([key, value]) => validateFn(value, key))
  )

// map 里直接调用即可
map(([reportProperties, reportObjectsProperties, textProperties, visibleText]) => 
  pickValidProps({
    reportProperties,
    reportObjectsProperties,
    textProperties,
    visibleText
  }, (value, key) => {
    // 针对不同属性自定义判断逻辑
    if (key === 'reportObjectsProperties') return value?.length
    return Boolean(value)
  })
)

如果你项目里已经引入了lodash，也可以直接使用现成的_.pickBy方法，逻辑和上面的工具函数完全一致。

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