URLSearchParams()

相信很多小伙伴在处理url地址参数的时候都是自己去单独封装函数处理url后面携带的参数，其实如果有心留意的话浏览器已经提供了一个API接口可以帮我们去处URL字符串查询，他就是今天的主角URLSearhParams

URLSearchParams()构造函数是浏览器一个实验中的功能，如果不需要考虑兼容性问题，可以直接使用，如果需要请参考浏览器兼容性

URLSearchParams() 构造器创建并返回一个新的URLSearchParams 对象。开头的'?' 字符会被忽略。

语法

/**
@params init(可选)
*/

var URLSearchParams = new URLSearchParams(init);
// init 可以是一个字符串，一般会搭配window.location.search,如 window.location.href='https://example.com?foo=1&bar=2'
let params1 = new URLSearchParams(window.location.search)
params1.get('foo') // 1
params1.getAll('foo') // ['1'] getAll方法会返回一个数组
params1.get('bar') // 2

// init 可以是一个序列，如下let arr = [["foo", 1],["bar", 2]]
let params2 = new URLSearchParams(arr)
params2.get('foo') // 1
params2.get('bar') // 2

// init 可以是一个对象如下： let obj = {name: 'jack', age: '18'}
let params3 = new URLSearchParams(obj)
params3.get('name') // jack
params3.get('')

实例方法

URLSearchParams.append()

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//添加第二个 foo 搜索参数。
params.append('foo', 4);
//查询字符串变成：'foo=1&bar=2&foo=4'

URLSearchParams.delete()

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//删除第二个 foo 搜索参数。
params.delete('foo');
//查询字符串变成：'bar=2'

URLSearchParams.entries()

URLSearchParams.entries()方法返回一个iterator，允许遍历该对象中包含的所有键/值对。每一组键值对都是 USVString对象

// 创建一个测试用 URLSearchParams 对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 显示键/值对
for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ', '+ pair[1]);
}

URLSearchParams.forEach()

语法

/**
@params value // 当前遍历键值
@params key // 当前遍历键名
@params searchParams // urlSearchParams 对象
*/
searchParams.forEach(callback(value,key,searchParams));

// 创建 URLSearchParams 对象的实例对象，用于测试
var searchParams = new URLSearchParams("key1=value1&key2=value2");

let returnValue = searchParams.forEach(function(value, key,searchParams) {
     // 打印值
     console.log(value, key,searchParams);
});

// 输出返回值
console.log(returnValue) 

// 返回结果
value1 key1 当前调用 forEach 方法的实例对象 (也就是 searchParams)
value2 key2 当前调用 forEach 方法的实例对象 (也就是 searchParams)
undefined  // 即没有返回值

URLSearchParams.get()

/**
@params name 要查询的键名
*/
URLSearchParams.get(name) // 返回 一个USVString 或者null

URLSearchParams.getAll()

以数组的形式返回与指定搜索参数对应的所有值。

/**
@params name 要查询的键名
*/
URLSearchParams.getAll(name) // string[] 或者 []

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//为 foo 参数添加第二个值
params.append('foo', 4);

console.log(params.getAll('foo')) //输出 ["1","4"].

URLSearchParams.has()

var hasName = URLSearchParams.has(name) // 返回一个 Boolean 表示一个指定的键名对应的值是否存在。

URLSearchParams.keys()

searchParams.keys(); // 返回一个iterator，遍历器允许遍历对象中包含的所有键。这些键都是USVString对象。

// 建立一个测试用 URLSearchParams 对象
var searchParams = new URLSearchParams("key1=value1&key2=value2");

// 输出键值对
for(var key of searchParams.keys()) {
  console.log(key); // key1 key2
}

URLSearchParams.set()

URLSearchParams.set(name, value) // 用于设置和搜索参数相关联的值。如果设置前已经存在匹配的值，该方法会删除多余的，如果将要设置的值不存在，则创建它
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//设置一个查询参数，追忆要和append方法区别，如果键值相同,set会重置所有，而append会新增一个值
params.appen('foo', 3); // params.getAll('for')返回['1','3']
params.set('foo','3') // params.getAll('foo')返回['3']

URLSearchParams.toString()

URLSearchParams.toString() // 返回适用在 URL 中的查询字符串
let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search.slice(1));

//Add a second foo parameter.
params.append('foo', 4);
console.log(params.toString());
//Prints 'foo=1&bar=2&foo=4'.