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。

实战二

将链接参数转换为对象,得到类似 vue-router 中 this.$route.query 一样的对象:

  const urlParams = new URLSearchParams(location.href.split('?')[1])
  // 把 urlParams 转成对象
  const params = Object.fromEntries(urlParams.entries())
  // 注:Object.fromEntries 可以把键值对对象转换为对象,如:Object.fromEntries([['a',1],['b',2]]) 得到 {a: 1, b: 2}

下面就开始介绍 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 上。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值