如何遍历JavaScript对象并生成指定格式的URL查询字符串

需求 #

输入对象：

const params = {
  'userId[]': [1, 2],
  'empId': 2,
  advance: 'hello',
};

需要生成的目标查询字符串：

userId[]=1&userId[]=2&empId=2&advance=hello

问题代码 #

你当前尝试的代码存在两处核心问题：一是数组处理时没有收集生成的键值对，二是未处理非数组类型的属性：

const myResult = Object.entries(params)
 .map(([key, value]) => {
  if (Array.isArray(value)) {
    let result;
    value.forEach(item => {
    `${key}=${value}`
    })
    return result
  }
 // return 
 })
 .join('&');

console.log(myResult);

修正方案 #

以下是可以实现需求的代码，同时加入了URL编码处理以兼容特殊字符：

const myResult = Object.entries(params)
  .flatMap(([key, value]) => {
    // 处理数组类型：为每个元素生成独立的键值对
    if (Array.isArray(value)) {
      return value.map(item => `${key}=${encodeURIComponent(item)}`);
    }
    // 处理非数组类型：直接生成键值对
    return `${key}=${encodeURIComponent(value)}`;
  })
  .join('&');

console.log(myResult);

关键调整说明 #

• 用flatMap替代map：数组会返回多个键值对字符串组成的数组，flatMap可以自动将二维数组扁平化，避免最终结果出现嵌套结构
• 数组处理改用map：forEach仅执行遍历无返回值，无法收集结果；map会返回每个元素对应的键值对字符串，方便后续拼接
• 补充非数组属性的处理逻辑：确保所有对象属性都能被转换为键值对
• 加入encodeURIComponent：对参数值进行URL编码，避免特殊字符（如&、=、空格等）破坏查询字符串结构

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