基于对象属性的条件展开：如何用JS扩展运算符过滤空属性？

结论 #

完全可以用扩展运算符结合条件对象属性实现该需求，你之前的思路方向正确，只是不能直接对整个obj2做整体判断，需要在属性维度做过滤处理。

实现方案 #

方案1：已知obj2所有属性时，逐个属性做条件判断

适合你明确知道待合并对象的属性列表的场景，每个属性单独判断非空后才加入：

const obj1 = { firstName: 'Foo', age: 22 };
const obj2 = { lastName: 'Bar', gender: 'M', birthPlace: '' };

const newObj = {
  ...obj1,
  // 仅属性值非空时才扩展对应属性
  ...(obj2.lastName ? { lastName: obj2.lastName } : {}),
  ...(obj2.gender ? { gender: obj2.gender } : {}),
  ...(obj2.birthPlace ? { birthPlace: obj2.birthPlace } : {})
};

方案2：通用空值过滤（推荐，属性未知也能用）

先写工具方法过滤掉对象中所有空值属性，再直接扩展过滤后的对象，可适配任意结构的待合并对象：

const obj1 = { firstName: 'Foo', age: 22 };
const obj2 = { lastName: 'Bar', gender: 'M', birthPlace: '' };

// 自定义空值判断规则，可根据业务需求调整，比如要不要排除0、false等
const isEmpty = (val) => val === '' || val === null || val === undefined;

// 过滤对象中空值属性的工具函数
const filterEmpty = (obj) => Object.fromEntries(
  Object.entries(obj).filter(([_, val]) => !isEmpty(val))
);

// 合并时直接扩展过滤后的对象即可
const newObj = { ...obj1, ...filterEmpty(obj2) };

两种方案最终得到的newObj都符合你的预期：

{ firstName: 'Foo', age: 22, lastName: 'Bar', gender: 'M' }

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