序言
前面中常用的每日任务之一是获得url里的主要参数。可是好像很多人不知道，现在也有一个 API 用以解决立即嵌入到电脑浏览器里的查询参数，它称之为URLSearchParams。在这篇文章中，我们将要快速体验一下 API，看一下应用查询参数有多么非常容易。
应用URLSearchParams
URLSearchParams期待获得一串查询参数（有或者没有原始的?）。假如你有一个完整的 URL，你想要从这当中分析查询参数，你能应用location.search来获取他们：
// URL: juejin.com/filter?size=M&colour=red&sleeves=short
location.search //=> ?size=M&colour=red&sleeves=short
const url = new URL("https://juejin.com/filter?filter?size=M&colour=red&sleeves=short")
url.search //=> ?size=M&colour=red&sleeves=short
我们目前能将location.search传达给URLSearchParams对象：
const params = new URLSearchParams(location.search)
查询参数
我们可以用has查询存不存在特定查询参数：
params.has('size') // => true
params.has('button-style') // => false
假如可以从查询参数中读选值，可以用get。假如不存有查询参数，你将回到null。
params.get('size') // => 'M'
params.get('button-style') // => null
与其说应用has查验，然后用get获得值，比不上应用get查验值是不是并不是null。
getvsgetAll
get有一个问题你应注意。查询参数可能会有好几个值：
// URL: juejin.com/filter?size=M&size=L
这是一个彻底高效的 URL。当我们将要它传达给URLSearchParams时，他会了解size有好几个值
get将只回到查询参数的第一个值。如果你想这所有的一切，你需要用到getAll它一直回到一个二维数组：
// URL: juejin.com/filter?size=M&size=L
const params = new URLSearchParams(location.search)
params.get('size') //=> 'M'
params.getAll('size') //=> ['M', 'L']
迭代更新主要参数
大家可以通过几类各种方式赋值全部主要参数。第一个如果采用for of。再度防备主要参数会取好几个值，他们会有2次！
// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
for (let p of params) {
console.log(p)
}
// => ['size', 'M']
// => ['size', 'L']
// => ['colour', 'red']
您也可以应用.keys()获取参数中的所有键的迭代器，或使用.values()获得所有值：
// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
console.log([...params.keys()]) // => ['size', 'size', 'colour']
console.log([...params.values()]) // => ['M', 'L', 'red']
console.log([...params.entries()]) // => [['size', 'M'], ['size', 'L'], ['colour', 'red']]
改动主要参数
最先需要注意的是，这所有的一切方式都是会更改已有的URLSearchParams目标，而非回到一个新目标。
您可以使用.delete()删掉查询参数。
假如生活中有好几个，这将会删掉它所有值：
// URL: juejin.com/filter?size=M&size=L&colour=red
const params = new URLSearchParams(location.search)
params.delete('size')
console.log([...params.keys()]) // => ['colour']
我们可以用.append()加上一个新的键/值对。若该值已经出现，append将额外新值：
// URL: juejin.com/filter?size=M&colour=red
const params = new URLSearchParams(location.search)
params.append('size', 'L')
console.log([...params.keys()]) // => ['size', 'size', 'colour']
console.log([...params.values()]) // => ['M', 'L', 'red']
console.log([...params.entries()]) // => [['size', 'M'], ['size', 'L'], ['colour', 'red']]
如果你想要为基本参数一个新值并删除全部别的目前值，你能应用.set来做到这一点：
// URL: juejin.com/filter?size=M&colour=red
const params = new URLSearchParams(location.search)
params.set('size', 'L')
console.log([...params.keys()]) // => ['size', 'colour']
console.log([...params.values()]) // => ['L', 'red']
console.log([...params.entries()]) // => [['size', 'L'], ['colour', 'red']]
取回来 URL
进行这所有的一切查询参数的载入和系统重装后，你可能期待将其作为 URL 拉到，便于你可以在电脑浏览器中升级 URL。因此，仅需启用.toString()：
// URL:juejin.com/filter?size=M&colour=red
const params = new URLSearchParams(location.search)
params.set('size', 'L')
params.delete('colour')
console.log(params.toString()) // => 'size=L'
一定要注意，
toString不能在开始加上?，因而必须确保在需要的时候还记得加上它。
结果
URLSearchParams是一个非常棒的 API，您可以使用它去清晰地升级您 URL 的查询参数，而不用担心一切额外库来分析查询参数，或是最后把它们变换回字符串数组。我建议您下一次必须进行一些查询参数分析或升级时进行它！