概念：
URLSearchParams接口定义了一些实用的方法来处理URL的查询字符串
一个实现了 URLSearchParams 的对象可以使用for...of来遍历：
// 这两行代码是一个意思 for(const [key, value] of serachParams){} for(const [key, value] of serachParams.entries()){}
构造函数：
URLSearchParams()
返回一个URLSearchParams对象
方法：
（该接口不继承任何属性）
append()：插入一个指定的键值对作文新的搜索参数
delete()：从搜索参数列表里删除指定的搜索参数及其对应的值
entries()：返回一个 iterator 可以遍历所有的键值对的对象
get()：获取指定搜索参数的第一个值
getAll()：获取指定搜索参数的所有值，组成一个数组
has()：返回Boolean值，判断是否存在次搜索参数
keys()：返回 iterator 此对象包含了键值对的所有键名
set()：设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值
sort()：按键名排序
toString()：返回搜索参数组成的字符串，可以直接使用在URL上
values()：返回 iterator 此对象包含了键值对的所有值
let paramsStr = ‘q=URLUtils.searchParams&topic=api&topic=api1‘ let searchParams = new URLSearchParams(paramsStr) for (let [key, value] of searchParams.entries()) { console.log(key, value) // q URLUtils.searchParams topic api topic api1 } for(let item of searchParams){ console.log(item) // ["q", "URLUtils.searchParams"] ["topic", "api"] ["topic", "api1"] } console.log(searchParams.has(‘topic‘) === true) // true console.log(searchParams.get(‘topic‘) === ‘api‘) // true console.log(searchParams.get(‘topic‘)) // api console.log(searchParams.getAll(‘topic‘)) // ["api", "api1"] searchParams.append(‘topic‘, ‘webdev‘) console.log(searchParams.toString()) // q=URLUtils.searchParams&topic=api&topic=api1&topic=webdev searchParams.set(‘topic‘, ‘more‘) // q=URLUtils.searchParams&topic=api&topic=api1&topic=webdev console.log(searchParams.toString()) // q=URLUtils.searchParams&topic=more searchParams.delete(‘topic‘) console.log(searchParams.toString()) // q=URLUtils.searchParams
// URLSearchParams 构造函数不识别完整的 url let paramsStr = ‘http://example.com/search?query=@‘ let searchParams = new URLSearchParams(paramsStr) console.log(searchParams.has(‘query‘)) // false console.log(searchParams.has(‘http://example.com/search?query‘)) // true console.log(searchParams.get(‘query‘)) // null console.log(searchParams.get(‘http://example.com/search?query‘)) // @ // 但是如果字符串起始位置有 ? 的话默认将 ? 去除 let paramsString = ‘?query=value‘ let searchParams1 = new URLSearchParams(paramsString) console.log(searchParams1.has(‘query‘)) // true // 可以利用 URL() 构造函数将字符串转为 url，再使用 search() 截取查询字符串 let url = new URL(‘http://example.com/search?query=@‘) let searchParams2 = new URLSearchParams(url.search) console.log(searchParams2.has(‘query‘)) // true
使用场景：
1、获取查询字符串
let url = ‘http://localhost:8080?a=1&b=2&c=3‘
function getRequest(url) {
var url = url || window.location.search;
var jsonList = {};
if (url.indexOf("?") > -1) {
var str = url.slice(url.indexOf("?") + 1);
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
jsonList[strs[i].split("=")[0]] = strs[i].split("=")[1];//如果出现乱码的话，可以用decodeURI()进行解码
}
}
return jsonList;
}
console.log(getRequest(url)) // {a: "1", b: "2", c: "3"}
// 兼容性较差，建议使用polyfill
const params = new URLSearchParams(url)
for (let key of params.keys()) {
console.log(key, params.get(key)) // http://localhost:8080?a 1 b 2 c 3
}
2、使用 URLSearchParams 处理 axios 发送的数据
在使用axios和fetch替代ajax时，会发现默认的数据格式不一致
axios({ method: ‘post‘, url: ‘/test‘, data: { name: ‘li lei‘, age: 18 } })
上面的调用方式和使用ajax时非常相似，但是他们默认的数据格式是不一样的
axios数据格式：
、
ajax数据格式：
多了一层包裹，这样和后端的对接就有问题了，哪怕是手动改contentType为application/x-www-form-urlencoded仍然没有解决：
利用 URLSearchParams 解决：
let params = new URLSearchParams(); params.append(‘name‘, ‘li lei‘); params.append(‘age‘, 18); axios({ method: ‘post‘, url: ‘/test‘, data: params })