js 将json数据转化为?的形式

📅 2026/8/13 9:56:54
js 将json数据转化为?的形式
1. js 将json数据转化为的形式将JSON数据转化为的形式”将JSON数据转换为格式。“格式”几乎肯定是指查询字符串格式key1value1key2value2通常前面会带一个?例如?foobarbazqux。在 JavaScript 中将 JSON对象转化为 ?keyvaluekey2value2 这种形式即 URL Query String查询字符串。1.1. 手写递归函数处理深层嵌套对象如果 JSON 里有嵌套对象或数组比如 { user: { id: 1 } }URLSearchParams 处理得不够直观会变成 [object Object]。这时可以使用递归函数将其转化为 user[id]1 或 tags[]1tags[]2 的格式。functionjsonToQueryString(obj,prefixnull){constpairs[];for(constkey in obj){if(!obj.hasOwnProperty(key))continue;constvalueobj[key];constfullKeyprefix?${prefix}[${key}]:key;// 生成 user[id] 这种格式// 处理 null 和 undefined跳过或置空if(valuenull||valueundefined){continue;}// 递归处理嵌套对象if(typeofvalueobject!Array.isArray(value)){pairs.push(jsonToQueryString(value,fullKey));}// 处理数组PHP常见风格 tags[]1tags[]2 elseif(Array.isArray(value)){for(constitem of value){pairs.push(${fullKey}[]${encodeURIComponent(item)});}}// 处理基本类型else{pairs.push(${fullKey}${encodeURIComponent(value)});}}returnpairs.join();}// 使用示例constdata{user:{id:1,name:Alex},interests:[coding,music]};conststrjsonToQueryString(data);console.log(?str);// 输出: ?user[id]1user[name]Alexinterests[]codinginterests[]music优点有嵌套对象/数组不想引入库。使用上面的 手写递归函数注意后端接受格式如 user[id] 或 user.id。注意拼接到 URL 时如果原本 URL 已有 ?请使用 连接否则直接用 ? 拼接。所有值建议经过 encodeURIComponent 编码上述方法均已自动处理。1.2. Vue封装//src/helper/initHelper/** * json数据转化成地址参数形式 */constjsonToParam(obj,prefixnull){constpairs[];for(constkey in obj){if(!obj.hasOwnProperty(key))continue;constvalueobj[key];// 生成 user[id] 这种格式constfullKeyprefix?${prefix}[${key}]:key;// 处理 null 和 undefined跳过或置空if(valuenull||valueundefined){continue;}// 递归处理嵌套对象if(typeofvalueobject!Array.isArray(value)){pairs.push(jsonToQueryString(value,fullKey));}// 处理数组PHP常见风格 tags[]1tags[]2 elseif(Array.isArray(value)){for(constitem of value){pairs.push(${fullKey}[]${encodeURIComponent(item)});}}// 处理基本类型else{pairs.push(${fullKey}${encodeURIComponent(value)});}}return?pairs.join();}exportdefault{jsonToParam:jsonToParam,}//使用let paramObj{}paramObj.usernameadminparamObj.passwordadmin123let paraminitHelper.jsonToParam(paramObj);