Web API 之 URLSearchParams 实战解析

在实际项目中，往往需要我们对当前页面的链接参数做一些操作。
比如，点击按钮复制当前页面链接，分享给好友进行助力，这时复制的链接上需要带上被助力用户的id，代码实现如下：

function getUrl() {
  // 去掉链接中的 addUserId 参数, 取当前用户
  const urlParams = new URLSearchParams(location.href.split('?')[1])
  urlParams.set('addUserId', userId.toString()) // 这里添加当前用户的id
  return location.href.split('?')[0] + '?' + urlParams.toString()
}

这里就使用到了URLSearchParams Web API。下面就开始介绍 URLSearchParams 的使用方法。

构造函数

URLSearchParams() 返回一个 URLSearchParams 对象。
一个实现了 URLSearchParams 的对象可以直接用在 for…of 结构中，以键/值对在查询字符串中出现的顺序对它们进行迭代

const urlParams = new URLSearchParams('a=1&b=2');
for(const [key,value] of urlParams){
  console.log(key,value)
}
// 输出
// a 1
// b 2

实例属性

size

返回 URLSearchParams 对象中查询参数的总个数。

new URLSearchParams('a=1&b=2').size
// 输出 2

实例方法

append()

插入一个指定的键/值对作为新的查询参数。
需要特别注意的是，append() 方法并不会为我们做去重，所以在添加之前最好先调用 delete() 进行删除，或者使用 set() 方法进行设置参数。

const urlParams = new URLSearchParams('a=1&b=2');
urlParams.append('c',3);
console.log(urlParams.toString());
// 输出 'a=1&b=2&c=3'
urlParams.append('c',3);
// 输出 'a=1&b=2&c=3&c=3'

delete()

从查询参数列表里删除指定的查询参数及其对应的值。
如果有相同参数，则也会一并删除。

const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.delete('b'); // 会删除所有 b 参数
console.log(urlParams.toString());
// 输出 'a=1'

set()

设置一个查询参数的新值，假如原来有多个值将删除其他所有的值。

const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.set('b',2);
console.log(urlParams.toString());
// 输出 'a=1&b=2'

entries()

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

const urlParams = new URLSearchParams('a=1&b=2');
for(const [key,value] of urlParams.entries()){
  console.log(key,value)
}
// 输出
// a 1
// b 2

forEach()

通过回调函数迭代此对象中包含的所有值。

const urlParams = new URLSearchParams('a=1&b=2');
urlParams.forEach(value=>{
  console.log(value)
})
// 输出
// 1
// 2

keys()

返回 iterator 此对象包含了键/值对的所有键名。不会去除重复键名

const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.keys().forEach(key=>console.log(key))
// 输出
// a
// b
// b

values()

返回iterator 此对象包含了键/值对的所有值。

const urlParams = new URLSearchParams('a=1&b=2&b=3');
urlParams.values().forEach(key=>console.log(key))
// 输出
// '1'
// '2'
// '3'

get()

获取指定查询参数的第一个值。注意：返回的是 string 类型的值

const urlParams = new URLSearchParams('a=1&b=2');
console.log(urlParams.get('a'))
// 输出 '1'

getAll()

获取指定查询参数的所有值，返回是一个数组。

const urlParams = new URLSearchParams('a=1&b=2&b=3');
console.log(urlParams.getAll('a'));
// 输出 ['1']
console.log(urlParams.getAll('b'));
// 输出 ['2', '3']

has()

返回 Boolean 判断是否存在此查询参数。

const urlParams = new URLSearchParams('a=1&b=2');
console.log(urlParams.has('a'))
// 输出 true
console.log(urlParams.has('c'))
// 输出 false

sort()

按键名排序。排序顺序是根据键的 Unicode 代码点。该方法使用稳定的排序算法 (即，将保留具有相等键的键/值对之间的相对顺序)。

const urlParams = new URLSearchParams('c=3&a=1&b=3&b=2');
urlParams.sort();
console.log(urlParams.toString());
// 输出 'a=1&b=3&b=2&c=3'

toString()

返回查询参数组成的字符串，可直接使用在 URL 上。