挑战与需求
在web开发中，我们经常需要将javascript对象转换为url查询参数。对于简单的键值对，javascript内置的 urlsearchparams api 或手动拼接字符串都能很好地完成任务。然而，当遇到需要将嵌套对象表示为特定格式的查询参数时，例如restful api中常见的“稀疏字段集”（sparse fieldsets）格式，标准的工具便显得力不从心。
考虑以下JavaScript对象：
const page = {
limit: 0,
offset: 10,
type: {
name: 's',
age: 'n'
}
};我们期望将其转换为如下形式的URL查询参数： limit=0&offset=10&type[name]=s&type[age]=n
这种格式要求嵌套对象的键（如 name, age）以方括号的形式（type[name]）附加到其父键（type）之后。URLSearchParams 默认会将嵌套对象序列化为 type=[object Object] 或直接忽略，无法满足此需求。因此，我们需要一个自定义的解决方案来处理这种复杂的转换逻辑。
递归解决方案：构建稀疏字段集查询参数
为了实现将嵌套对象转换为稀疏字段集格式的查询参数，我们可以设计一个递归函数。该函数能够遍历对象的每一层，并根据其是否为嵌套对象来决定如何拼接键值对。
/**
* 将JavaScript对象转换为稀疏字段集格式的URL查询参数字符串。
* @param {object} obj - 待转换的JavaScript对象。
* @param {string} [parentKey] - 当前对象的父级键名，用于处理嵌套。
* @returns {string} 格式化后的URL查询参数字符串。
*/
const createSparseFieldsetQuery = (obj, parentKey = '') => {
const queryParts = Object.keys(obj).map(key => {
const value = obj[key];
const currentKey = parentKey ? `${parentKey}[${key}]` : key;
// 检查是否为非null的普通对象（排除数组）
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
// 如果是嵌套对象，则递归调用
return createSparseFieldsetQuery(value, currentKey);
} else {
// 否则，直接拼接键值对，并进行URL编码
return `${encodeURIComponent(currentKey)}=${encodeURIComponent(value)}`;
}
});
// 使用 '&' 连接所有部分，并过滤掉可能为空的项
return queryParts.filter(Boolean).join('&');
};代码解析：
立即学习“Java免费学习笔记（深入）”；
- createSparseFieldsetQuery(obj, parentKey = ''): 函数接收两个参数，obj 是当前需要处理的对象，parentKey 是可选的，用于记录当前对象在整个结构中的父级键名。初始调用时 parentKey 为空字符串。
- Object.keys(obj).map(...): 遍历当前对象的所有键。
- currentKey = parentKey ?${parentKey}[${key}]: key;: 这是构建稀疏字段集格式的关键。如果存在 parentKey（即当前处理的是一个嵌套对象），则将当前键 key 用方括号包裹并附加到 parentKey 之后（例如 type[name]）；否则，直接使用 key（例如 limit）。
- if (typeof value === 'object' && value !== null && !Array.isArray(value)): 判断当前值是否为非null的普通对象（排除数组）。如果是，则递归调用 createSparseFieldsetQuery 函数，并将 currentKey 作为新的 parentKey 传递下去，以便处理更深层次的嵌套。
- else { return${encodeURIComponent(currentKey)}=${encodeURIComponent(value)}; }: 如果当前值不是嵌套对象，则直接将其键和值进行URL编码，然后拼接成 key=value 的形式。
- queryParts.filter(Boolean).join('&'): 最后，将所有生成的查询参数部分通过 & 符号连接起来，形成最终的查询字符串。filter(Boolean) 用于移除可能由空对象等情况产生的空字符串。
使用示例
现在，我们可以使用 createSparseFieldsetQuery 函数来转换前面定义的 page 对象：
const page = {
limit: 0,
offset: 10,
type: {
name: 's',
age: 'n'
}
};
const queryString = createSparseFieldsetQuery(page);
console.log(queryString);
// 预期输出: limit=0&offset=10&type%5Bname%5D=s&type%5Bage%5D=n
// 完整的URL示例
const baseUrl = "https://sample.run/api/product";
const fullUrl = `${baseUrl}?${queryString}`;
console.log(fullUrl);
// 预期输出: https://sample.run/api/product?limit=0&offset=10&type%5Bname%5D=s&type%5Bage%5D=n请注意，encodeURIComponent 会将特殊字符（如 [ 和 ]）编码为 %5B 和 %5D，这是URL规范要求的，确保了URL的有效性和安全性。浏览器或服务器在解析时会自动解码。
注意事项与最佳实践
- URL编码的重要性： 在实际应用中，对查询参数的键和值进行 encodeURIComponent 是至关重要的。这可以防止特殊字符（如空格、&、=、?、/ 等）破坏URL结构或引起安全问题。本教程提供的代码已包含此处理。
- 数组的处理： 当前的 createSparseFieldsetQuery 函数将数组视为非嵌套对象，直接对其元素进行 toString() 并编码。如果需要将数组表示为 param[]=value1¶m[]=value2 或 param[0]=value1¶m[1]=value2 这种形式，则需要对 Array.isArray(value) 的分支进行特殊处理。
- 空值和Null值： 当对象属性值为 null 或 undefined 时，encodeURIComponent 会将其转换为字符串 "null" 或 "undefined"。根据API要求，你可能需要决定是否要过滤掉这些参数，或者将其转换为特定的空字符串。
- 复杂数据类型： 对于函数、Symbol等无法直接序列化的数据类型，它们将被 toString() 转换为字符串。通常，这些类型不应出现在URL查询参数中。
- 性能考量： 对于非常深或非常大的对象，递归调用可能会消耗较多栈空间。但在大多数Web API查询参数场景中，对象深度和大小通常在可接受范围内。
总结
通过本文介绍的自定义递归函数 createSparseFieldsetQuery，我们能够灵活地将JavaScript中的嵌套对象转换为符合“稀疏字段集”格式的URL查询参数。这种方法弥补了标准 URLSearchParams 在处理此类特定格式时的不足，为构建复杂且符合API规范的URL提供了有效途径。在实际开发中，务必结合 encodeURIComponent 确保URL的正确性和安全性。
