如何用Object.assign()忽略空值/undefined，避免生成空HTML属性？

我正在使用Object.assign()为HTML元素添加属性，代码如下：

const { attr1, attr2, attr3 } = attributes; 
return Object.assign({ 
  ['data-attr-1']: attr1, 
  ['data-attr-2']: attr2, 
  ['data-attr-3']: attr3, 
}); 

目前当属性值为空时，仍会生成对应的HTML属性。请问仅使用Object.assign()能否忽略这类空值属性？

嘿，直接只用Object.assign()本身是做不到自动忽略空值属性的——这个方法的核心就是把源对象的所有可枚举属性一股脑复制到目标对象，不管属性值是不是空。不过我们可以先给要传入的对象做个“大扫除”，把空值属性剔除干净后，再传给Object.assign()，就能达到你想要的效果了。

给你两种实用的实现方式：

方式一：用Object.entries+filter+Object.fromEntries过滤 #

这种写法比较简洁，适合属性较多的场景：

const { attr1, attr2, attr3 } = attributes;

// 先构建原始属性映射，再过滤掉空值属性
const filteredAttrs = Object.fromEntries(
  Object.entries({
    ['data-attr-1']: attr1,
    ['data-attr-2']: attr2,
    ['data-attr-3']: attr3,
  }).filter(([key, value]) => value != null) 
  // 要是你还想排除空字符串，可以把条件改成`value != null && value !== ''`
);

return Object.assign({}, filteredAttrs);

方式二：手动判断添加属性 #

这种写法更直观，适合属性数量不多的场景：

const { attr1, attr2, attr3 } = attributes;
const attrs = {};

// 只给有有效值的属性赋值
if (attr1 != null) attrs['data-attr-1'] = attr1;
if (attr2 != null) attrs['data-attr-2'] = attr2;
if (attr3 != null) attrs['data-attr-3'] = attr3;

return Object.assign({}, attrs);

总结一下：Object.assign()本身没有过滤属性的能力，必须先手动处理掉不需要的空值属性，再把清理后的对象传给它。你可以根据自己的需求调整“空值”的定义——比如是只排除null/undefined，还是也要排除空字符串、0这类，修改过滤条件就好啦。

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