JavaScript URLSearchParams链接(URL)参数操作接口

URLSearchParams方法列表：

• has()：返回一个布尔值，表示是否具有某个参数
• get()：返回指定参数的第一个值
• getAll()：返回一个数组，成员是指定参数的所有值
• set()：设置指定参数
• delete()：删除指定参数
• append()：在查询字符串之中，追加一个键值对
• toString()：返回整个查询字符串
  
  URLSearchParams还有三个方法，用来遍历所有参数。

• keys()：遍历所有参数名
• values()：遍历所有参数值
• entries()：遍历所有参数的键值对

以下例子从w3cschool摘抄，如有侵权请联系删除　　

var paramsString = 'q=URLUtils.searchParams&topic=api';
var searchParams = new URLSearchParams(paramsString);

searchParams.has('topic') // true
searchParams.get('topic') // "api"
searchParams.getAll('topic') // ["api"]

searchParams.get('foo') // null，注意Firefox返回空字符串
searchParams.set('foo', 2);
searchParams.get('foo') // 2

searchParams.append('topic', 'webdev');
searchParams.toString() // "q=URLUtils.searchParams&topic=api&foo=2&topic=webdev"

searchParams.append('foo', 3);
searchParams.getAll('foo') // [2, 3]

searchParams.delete('topic');
searchParams.toString() // "q=URLUtils.searchParams&foo=2&foo=3"

　　

以下是三个用来遍历所有参数的例子。

• keys()：遍历所有参数名
• values()：遍历所有参数值
• entries()：遍历所有参数的键值对

上面三个方法返回的都是Iterator对象。

var searchParams = new URLSearchParams('key1=value1&key2=value2');

for (var key of searchParams.keys()) {
  console.log(key);
}
// key1
// key2

for (var value of searchParams.values()) {
  console.log(value);
}
// value1
// value2

for (var pair of searchParams.entries()) {
  console.log(pair[0]+ ', '+ pair[1]);
}

遍历方法还有另外一种写法

for (var p of searchParams) {
  console.log(p);
}

URLSearchParams实例可以当作POST数据发送，所有数据都会URL编码。

let params = new URLSearchParams();
params.append('api_key', '1234567890');

fetch('https://example.com/api', {
  method: 'POST',
  body: params
}).then(...)

DOM的a元素节点的searchParams属性，就是一个URLSearchParams实例。

var a = document.createElement('a');
a.href = 'https://example.com?filter=api';
a.searchParams.get('filter') // "api"

URLSearchParams还可以与URL接口结合使用。

var url = new URL(location);
var foo = url.searchParams.get('foo') || 'somedefault';