如何将含嵌套数组与对象的复杂对象序列化为URL查询参数？

要把包含嵌套对象和数组的复杂对象，序列化为你需要的URL查询参数格式，可以通过递归遍历对象结构，拼接带层级路径的键名，最后进行URL编码来实现。以下是具体方案：

原生JavaScript实现 #

写一个递归函数，遍历对象的每一层，分别处理嵌套对象和数组的路径拼接逻辑：

function serializeQueryParams(obj, prefix = '') {
  const params = [];
  
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      const currentPath = prefix ? `${prefix}[${key}]` : key;
      const value = obj[key];
      
      if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
        // 处理嵌套对象，递归拼接路径
        params.push(...serializeQueryParams(value, currentPath));
      } else if (Array.isArray(value)) {
        // 处理数组，每个元素对应带[]的路径
        value.forEach(item => {
          params.push(`${currentPath}[]=${encodeURIComponent(item)}`);
        });
      } else {
        // 基础类型直接编码拼接
        params.push(`${currentPath}=${encodeURIComponent(value)}`);
      }
    }
  }
  
  return params.join('&');
}

// 测试你的示例对象
const query = {
  "page": {
    "number": 1,
    "size": 50
  },
  "sort": "engagement_total",
  "sort_direction": "asc",
  "filters": {
    "engagement_total": {
      "type": "range",
      "value": [21, 46]
    }
  }
};

const result = serializeQueryParams(query);
console.log(result);
// 输出：filters[engagement_total][type]=range&filters[engagement_total][value][]=21&filters[engagement_total][value][]=46&page[number]=1&page[size]=50&sort=engagement_total&sort_direction=asc
// 浏览器会自动将[]编码为%5B/%5D，即你需要的目标格式

逻辑说明 #

• 嵌套对象的键名会拼接成parent[child]的层级格式
• 数组元素会生成key[]=value的结构，多个元素对应多条参数
• 所有值通过encodeURIComponent处理，避免特殊字符破坏URL结构

第三方库快捷实现 #

如果项目中已引入qs（常用的查询参数处理库），可以直接调用内置方法快速实现：

const qs = require('qs'); // 浏览器环境可通过script标签引入

const result = qs.stringify(query, { arrayFormat: 'brackets' });
console.log(result);
// 输出与原生实现一致的格式

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