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
复制代码

兼容性

兼容性虽然很差，可是有polyfill项目能够支持
项目地址