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項目能夠支持
項目地址