You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

JavaScript递归函数实现任意嵌套对象转指定URL参数字符串问题

嵌套对象转URL参数格式的递归实现问题

我有一个简单的嵌套对象:

let obj = {
  season: 'winter',
  data: {
      month: ['December', 'January', 'February']
     }
};

需要将其转换为如下格式的字符串:

season=winter&data[month][0]=December&data[month][1]=January&data[month][2]=February

我尝试编写了递归函数convertToText,但未完全成功,当前代码如下:

function convertToText(obj) {
  let string = [];
  if (typeof(obj) == "object") {
    for (prop in obj) {
      if (obj.hasOwnProperty(prop))
        string.push(prop + "=" + convertToText(obj[prop]));
    };
    return string.join("&");
  } else {
    string.push(JSON.stringify(obj))
  }

  return string.join();
}

let obj = {
  season: 'winter',
  data: {
    month: ['December', 'January', 'February']
  }
};

console.log(convertToText(obj));

当前输出结果为:

"season='winter'&data=month=0='December'&1='January'&2='February'"

现寻求正确的递归实现方法,使输出符合预期格式。


解决方法

核心思路是递归时传递当前的参数前缀,让嵌套对象/数组的键能正确拼接成parent[key]或parent[index]的格式:

function convertToText(obj, prefix = '') {
  let parts = [];

  // 单独处理数组,用索引拼接前缀
  if (Array.isArray(obj)) {
    obj.forEach((item, index) => {
      const newPrefix = prefix ? `${prefix}[${index}]` : String(index);
      parts.push(convertToText(item, newPrefix));
    });
  } 
  // 处理普通对象(排除null,因为typeof null也会返回object)
  else if (obj !== null && typeof obj === 'object') {
    Object.keys(obj).forEach(key => {
      const newPrefix = prefix ? `${prefix}[${key}]` : key;
      parts.push(convertToText(obj[key], newPrefix));
    });
  } 
  // 处理字符串、数字等基础类型值
  else {
    // 用encodeURIComponent处理特殊字符,保证URL参数格式合法
    parts.push(`${prefix}=${encodeURIComponent(obj)}`);
  }

  return parts.join('&');
}

// 测试代码
let obj = {
  season: 'winter',
  data: {
    month: ['December', 'January', 'February']
  }
};

console.log(convertToText(obj));

关键细节说明

  1. 前缀传递逻辑:每进入一层嵌套,就把当前的键/索引拼接到前缀后面,确保层级关系正确
  2. 类型区分处理:数组和普通对象的前缀拼接规则不同,数组用索引,对象用属性名
  3. 值的安全处理:用encodeURIComponent转义特殊字符,避免参数中出现空格、中文等导致格式错误
  4. null边界处理:单独排除null,防止把null当成对象递归处理

最终输出

season=winter&data[month][0]=December&data[month][1]=January&data[month][2]=February

内容的提问来源于stack exchange,提问作者Evgeniy

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 01:20:19