Object.entries() 配合 reduce() 可高效构建 URL 查询字符串：先跳过 null/undefined/''/NaN 值，再用 encodeURIComponent 分别编码键值，最后以 & 连接。
直接用 Object.entries() 配合 reduce() 构建 URL 查询字符串，核心在于正确编码键值对、跳过无效值，并用 & 连接。它比手拼或引入工具库更轻量、可控性强。
只处理可枚举的自有属性，自动过滤 null/undefined/空字符串
业务对象常含占位字段（如 filter: null 或 page: ""），这些不应出现在查询参数中。在 reduce 回调里加一层判断即可：
- 检查值是否为
null、undefined、''（空字符串）、NaN - 用
typeof value === 'number' && isNaN(value)精准识别NaN - 跳过不满足条件的项，避免生成
?key=这类无效片段
严格编码键和值，防止特殊字符破坏 URL 结构
用户输入或后端返回的字段可能含空格、中文、&、= 等，必须用 encodeURIComponent() 分别处理键与值：
- 不要只编码值而忽略键（如对象有动态 key：
{'user name': '张三'}） - 避免用
encodeURI()—— 它不编码/、?、=等，不适合 query string - 示例：
encodeURIComponent('a&b') → 'a%26b'，encodeURIComponent(' ') → '%20'
用 reduce 累积拼接，清晰控制分隔逻辑
reduce() 比 map().join() 更适合——它天然支持“首次不加前缀”的逻辑，无需额外判断索引：
- 初始值设为空字符串
'' - 每次迭代：若累积字符串非空，先加
&；再拼入key=value - 代码简洁：
acc ? `${acc}&${k}=${v}` : `${k}=${v}` - 比
entries.map(...).filter(...).join('&')少一次遍历，性能略优
完整可复用函数示例
封装成函数，兼顾健壮性与业务常见需求：
function objectToQueryString(obj) {
if (!obj || typeof obj !== 'object') return '';
return Object.entries(obj).reduce((acc, [key, value]) => {
// 跳过无效值
if (value == null || value === '' || (typeof value === 'number' && isNaN(value))) {
return acc;
}
const encodedKey = encodeURIComponent(key);
const encodedValue = encodeURIComponent(String(value));
return acc ? `${acc}&${encodedKey}=${encodedValue}` : `${encodedKey}=${encodedValue}`;
}, '');
}
// 使用示例
const params = { q: '前端开发', page: 1, category: null, tag: '', sort: 'new' };
console.log(objectToQueryString(params));
// → "q=%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91&page=1&sort=new"
