凡是夫妇不吵架的家庭，准是一块阴森之地，既没有冲击，故也没有快乐——柏杨
有些时候，我们需要使用GET请求传递数组，但是使用很多前端请求框架，以及EcmaScript自带的URLSearchParams转换的URL参数都无法直接进行转换：
例如以下格式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
"current": 1,
"size": 1,
"orders": [
{
"column": "age",
"asc": true
},
{
"column": "name",
"asc": true
}
]
}
|
使用URLSearchParams转换结果：
1
2
3
4
| let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
new URLSearchParams(searchParams).toString()
|
明显不是我们要的结果
那我们写一行js：
1
| Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))
|
再封装一下：
1
2
3
| function handleArrayParams(params){
return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))
}
|
最后使用：
1
2
3
4
5
6
7
| let searchParams = {current:1,size:1,orders:[{column:'age',asc:true},{column:'name',asc:true}]}
function handleArrayParams(params){
return Object.fromEntries(Object.entries(params).flatMap(([k,v])=>Array.isArray(v)?Object.entries(v).flatMap(([index,value])=> Object.entries(value).map(([ak,av])=>[`${k}[${index}].${ak}`,av])):[[k,v]]))
}
new URLSearchParams(handleArrayParams(searchParams)).toString()
|
结果：
1
| 'current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true'
|
这个可以直接放在url后面当做参数使用，即便是数组也可以，这里只做了一层，并没有尝试深入处理
解码后是这样一个格式：
1
2
3
4
|
decodeURIComponent('current=1&size=1&orders%5B0%5D.column=age&orders%5B0%5D.asc=true&orders%5B1%5D.column=name&orders%5B1%5D.asc=true')
'current=1&size=1&orders[0].column=age&orders[0].asc=true&orders[1].column=name&orders[1].asc=true'
|