JavaScript中展开运算符能否忽略值为undefined的属性

原生JavaScript的对象展开运算符不支持自动忽略值为undefined的属性。根据ECMAScript规范，对象展开操作会复制源对象的所有自有可枚举属性，显式赋值为undefined的属性会被作为有效属性保留，不会被自动删除。

推荐优雅实现方案 #

• 方案1：解构+剩余运算符（最优解，适合明确要删除的属性的场景） #

  直接通过解构提取要删除的属性，剩余运算符自动聚合需要保留的属性，不需要额外创建临时对象、也不需要delete操作，性能优异，同时TypeScript类型兼容：

  [{ a: 5, b: 2 }, { a: 2, b: 5 }].map(({ b, ...rest }) => rest)
  

  输出结果符合预期：[{a:5},{a:2}]
  优势：语法简洁，无论保留的属性数量多少，只需要列出要删除的属性即可，无额外性能开销，TS不会抛出非可选属性相关错误。

• 方案2：封装undefined过滤工具函数（适合需要动态过滤的场景） #

  如果你确实需要先给属性赋值为undefined再统一清理，可以封装通用工具函数：

  const filterUndefined = (obj) => Object.fromEntries(
    Object.entries(obj).filter(([_, value]) => value !== undefined)
  )
  
  // 调用示例
  [{ a: 5, b: 2 }, { a: 2, b: 5 }].map(x => filterUndefined({
    ...x,
    b: undefined
  }))
  

  这个方案灵活度高，适合需要批量处理多个undefined属性的场景。

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