本文介绍多种优雅方式，将对象属性按固定顺序（如 first、middle、last、suffix）拼接为字符串，自动跳过空值并处理多余空格，避免冗长的 if/else 条件判断。
在实际开发中，我们常需将用户信息对象（如 { first: 'John', middle: 'Henry', last: 'Doe', suffix: 'Sr' }）按语义化顺序（而非对象属性声明顺序）拼接为格式化姓名字符串，例如 "John Henry Doe Sr"。关键挑战在于：既要保证字段顺序可控，又要安全忽略 undefined、null 或空字符串等“空值”，同时避免生成多余空格。
以下是三种推荐方案，兼顾可读性、健壮性与现代 JavaScript 特性：
✅ 方案一：显式字段数组 + filter() + join()（推荐）
最清晰、最可控的方式——明确列出所需字段及其顺序，利用可选链（?.）安全取值，并用 filter(val => val) 自动剔除所有 falsy 值（包括 null、undefined、''、0、false；若需保留 0 或 '0'，请改用 filter(val => val != null && val !== '')）：
const infos = [
{ first: 'John', middle: 'Henry', last: 'Doe', suffix: 'Sr' },
{ first: 'Jane', last: 'Doe' }
];
const names = infos.map(info =>
[info?.first, info?.middle, info?.last, info?.suffix]
.filter(val => val) // 移除所有 falsy 值
.join(' ')
);
// → ['John Henry Doe Sr', 'Jane Doe']✅ 优势：顺序完全由数组索引决定，逻辑直白，易于维护和测试。
✅ 方案二：模板字符串 + 空值合并 + 正则清理
适合偏好声明式风格的场景。使用 ?? '' 提供默认空字符串，再通过 .trim().replace(/\s+/g, ' ') 统一处理首尾及中间多余空格：
const names = infos.map(info =>
`${info?.first ?? ''} ${info?.middle ?? ''} ${info?.last ?? ''} ${info?.suffix ?? ''}`
.trim()
.replace(/\s+/g, ' ')
);⚠️ 注意：此法在字段值本身含多个空格时会将其压缩为单空格；若需保留原始空格语义，请优先选用方案一。
⚠️ 方案三：Object.values()（不推荐用于顺序敏感场景）
// ❌ 错误示例（顺序不可靠！）
Object.values(info).filter(val => val).join(' ');虽然简洁，但 Object.values() 不保证属性遍历顺序（ES2015+ 规范仅对数字键和插入顺序有保障，普通字符串键顺序依赖引擎实现）。对于 first/middle/last/suffix 这类语义化字段，绝对不应依赖对象字面量的书写顺序。该写法仅适用于你完全控制对象结构且已验证运行时顺序的极少数场景。
✅ 最佳实践总结
- 始终显式声明字段顺序：使用数组 [info?.first, info?.middle, ...] 是最安全、最可读的选择；
- 用 filter(val => val) 而非 filter(Boolean)：语义更明确，且避免意外过滤 0 或 '0'（如需保留，调整条件即可）；
- 避免 Object.values() 拼接姓名类字符串：语义顺序 ≠ 对象属性顺序；
- 批量处理时统一使用 .map()：天然支持数组输入，便于扩展（如后续添加格式化、国际化等逻辑）。
最终，一行清晰、健壮、可维护的代码胜过十行“聪明”却难懂的技巧——让顺序可见，让空值隐形，让逻辑自解释。
