URLSearchParams 的使用

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

一个实现了 URLSearchParams 的实例返回一个iterator可以遍历所有键/值对的对象，可以直接用在 for...of 结构中。

简单的例子

let params = new URLSearchParams('?a=1&b=2')
params.get('a') // 1

可以看到获取参数变得十分遍历，不需要自己分割或正则处理。

方法

我们打印一个URLSearchParams实例，可以看到继承了很多方法

console.log(new URLSearchParams())

URLSearchParams {}
	__proto__: URLSearchParams
		append: ƒ append()
		delete: ƒ delete()
		entries: ƒ entries()
		forEach: ƒ forEach()
		get: ƒ ()
		getAll: ƒ getAll()
		has: ƒ has()
		keys: ƒ keys()
		set: ƒ ()
		sort: ƒ sort()
		toString: ƒ toString()
		values: ƒ values()
		constructor: ƒ URLSearchParams()
		Symbol(Symbol.iterator): ƒ entries()
		Symbol(Symbol.toStringTag): "URLSearchParams"
		__proto__: Object

挨个看一下

let params = new URLSearchParams('?a=1&b=2&a=3&c=4')

append() 插入一个指定的键/值对作为新的搜索参数。

params.append('a',10) // 会新增一个键值对 a=10，即使a已经存在也不会覆盖
params.getAll('a') // ["1", "3", "10"]

delete() 从搜索参数列表里删除指定的搜索参数及其对应的值。

params.delete('a') // 会删除所有a
params.getAll('a')  // []

entries() 返回一个iterator可以遍历所有键/值对的对象。

var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
let oIterator = params.entries()
for(var pair of oIterator) {
   console.log(pair[0]+ ', '+ pair[1]); 
}
// c, 1
// b, 2
// a, 3
// c, 4

forEach() 循环方法，同常规forEach()方法

var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
params.forEach((val,key) => console.log(val,key))
// 1 c
// 2 b
// 3 a
// 4 c

get() 获取指定搜索参数的第一个值，多个相同键名，只取第一个，没搜索到的，返回null

params.get('d') // null

getAll() 获取指定搜索参数的所有值，返回是一个数组

let params = new URLSearchParams('?a=1&b=2&a=3&c=4')
params.getAll('a) // [1,3]

has() 返回 Boolean 判断是否存在此搜索参数

params.has('e') // false

keys() 返回iterator 此对象包含了键/值对的所有键名

let oIterator1 = params.keys()
for(let item of oIterator1) {
	console.log(oIterator1.next())
}
// {done: false, value: "b"}
// {done: false, value: "c"}

set() 设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。

params.set('d','5')
params.get('d') // 5

params.set('a','5')
params.getAll('a') // [5]

sort()按键名排序

var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
params.sort()
params.toString() // "a=3&b=2&c=1&c=4"

toString() 返回搜索参数组成的字符串，可直接使用在URL上，示例见上

values() 返回iterator 此对象包含了键/值对的所有值

var params = new URLSearchParams('?c=1&b=2&a=3&c=4')
var oValues = params.values()
for(var value of oValues) {
  console.log(value);
}
// 1 
// 2 
// 3 
// 4

兼容性