【日常记录】【JS】JS中查询参数处理工具URLSearchParams

文章目录

- 1. 引言
- 2. URLSearchParams
- - 2.1 URLSearchParams 的构造函数
  - 2.2 append() 方法
  - 2.3 delete() 方法
  - 2.4 entries() 方法
  - 2.5 forEach() 方法
  - 2.6 get() 方法
  - 2.7 getAll() 方法
  - 2.8 has() 方法
  - 2.9 keys() 方法
  - 2.10 set() 方法
  - 2.11 toString() 方法
  - 2.12 values() 方法
- 参考链接

1. 引言

在实际开发中，这个界面跳转到另一个界面是很常见的需求，只要涉及到跳转，就是涉及到两个界面之前的参数传递，这个时候一般都会拼接一些查询参数，然后另一个界面解析这个查询参数，拿到相应的值，进行对应的处理

为了简化这一过程，js 提供了URLSearchParams URLSearchParams是一个用于解析和生成URL查询参数的实用工具

2. URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

在这里插入图片描述

2.1 URLSearchParams 的构造函数

URLSearchParams() 构造函数创建并返回一个新的 URLSearchParams 对象。

new URLSearchParams()
new URLSearchParams(options)

参数

options：可选，可以是以前情况之一
- 一个字符串，会按 application/x-www-form-urlencoded 的格式进行解析。开头的 ‘?’ 字符会被忽略
- 一系列基于字面量的字符串键值对，或者任何对象
- 一个由字符串键和字符串值组成的键值对对象。请注意，不支持嵌套

返回值

一个 URLSearchParams 实例。

示例

    // 通过 url.search 检索参数，传递到构造函数const url = new URL("https://example.com?foo=1&bar=2");console.log('url', url);const params1 = new URLSearchParams(url.search);// 直接从 URL 对象获取 URLSearchParams 对象const params1a = url.searchParams;console.log(params1a);// 传入字符串const params2 = new URLSearchParams("foo=1&bar=2");const params2a = new URLSearchParams("?foo=1&bar=2");console.log('params2a', params2a);// 传入一系列键值对const params3 = new URLSearchParams([["foo", "1"],["bar", "2"],]);console.log('params3', params3);// 传入记录const params4 = new URLSearchParams({ foo: "1", bar: "2" });console.log('params4', params4);

在这里插入图片描述

一般最常见的就是以下情况

传入 ?号，开头的查询参数；如：?foo=1&bar=2
传入 不带问号的查询参数；如：foo=1&bar=2
传入一个对象；这个一般是为了跳转到其他界面，参数过多的时候，不方便自己拼接

2.2 append() 方法

URLSearchParams 接口的 append() 方法将指定的键/值对附加为新的查询参数。

语法

append(name, value)

参数

name：要添加参数的键名
value：要添加参数的值

返回值

示例

    let params = new URLSearchParams('?foo=1&bar=2');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);console.log(params.toString()); // foo=1&bar=2&foo=4&foo=4&foo=4

注意：相同的键名追加多次，不会覆盖
控制台输出结果如下

在这里插入图片描述

2.3 delete() 方法

URLSearchParams 接口的 delete() 方法从所有查询参数的列表中删除指定的参数及其关联值。

语法

delete(name)
delete(name, value)

参数

name：要删除的键名称
value：要删除的键值，可选

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);console.log(params.toString());console.log('删除 bar 前', params.toString());params.delete("bar");console.log('删除 bar 后', params.toString());console.log('删除 foo 前', params.toString());params.delete("foo");console.log('删除 foo 后', params.toString());

在这里插入图片描述

如若指定了删除的键名称，这个键名称存在一个，那么只会删除这一个
如若指定了删除的键名称，这个键名称存在多个，那么这多个都会删除
如若指定了删除的键名称、键的值，那么只会删除键名称、键值一样的，如若这俩一样还存在多个，那么这多个都会删除，只要这俩一样都会删除

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);console.log(params.toString());console.log('删除 bar 前', params.toString());params.delete("bar");console.log('删除 bar 后', params.toString());// console.log('删除 foo 前', params.toString());// params.delete("foo");// console.log('删除 foo 后', params.toString());console.log('删除 foo = 1 前', params.toString());params.delete("foo", "1");console.log('删除 foo = 1 后', params.toString());

在这里插入图片描述

2.4 entries() 方法

URLSearchParams 接口的 entries() 方法返回一个用于遍历该对象中包含的所有键/值对的迭代器。迭代器按照查询字符串中出现的顺序返回键/值对，每一组键和值都是字符串对象。

语法

entries()

参数

返回值

迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);// 显示键/值对for (const item of params.entries()) {// console.log(`${key}, ${value}`);console.log(item);}

在这里插入图片描述

这里的 item 就是一个数组，第一项是 key，第二项是 value，这个地方和 Object.entries 是一样的

可以直接用数组解构

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);// 显示键/值对for (const [key, value] of params.entries()) {console.log(`${key}, ${value}`);// console.log(item);}

在这里插入图片描述

2.5 forEach() 方法

URLSearchParams 接口的 forEach() 方法允许通过回调函数来遍历实例对象上的键值对。和 Array.forEach 类似

语法

forEach(callback)
forEach(callback, thisArg)

参数
在这里插入图片描述
返回值

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);params.forEach((value, key) => {console.log(`${key}, ${value}`);});

在这里插入图片描述

2.6 get() 方法

URLSearchParams 接口的 get() 方法返回第一个与查询参数对应的值。

语法

get(name)

参数

name：要返回的参数的键名。

返回值

如果找到了给定的查询参数，则返回一个字符串；否则返回 null。

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);console.log(params.get('foo'));console.log(params.get('age'));

在这里插入图片描述

获取 foo 的时候，返回的是 1 ，因为如若这个键对应的值有多个，那么会返回第一个，如若这个键没有找到，则返回null

2.7 getAll() 方法

URLSearchParams 接口的 getAll() 方法以数组的形式返回与指定查询参数对应的所有值。

语法

getAll(name)

参数

name：要返回的参数的键名。

返回值

一个字符串的数组，如果没有找到给定参数的值，则其可以是空的。

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 4);params.append("foo", 4);params.append("foo", 4);// // 显示键/值对// for (const [key, value] of params.entries()) {//   console.log(`${key}, ${value}`);//   // console.log(item);// }// params.forEach((value, key) => {//   console.log(`${key}, ${value}`);// });console.log(params.getAll('foo'));console.log(params.getAll('age'));

在这里插入图片描述

foo 本来是一个，然后又添加了三个，所以用 getAll 获取的时候，会返回四个
如若没有找到这个键名称，那么返回的就是一个空数组

2.8 has() 方法

URLSearchParams 接口的 has() 方法返回一个布尔值，表示指定的键名对应的值是否存在于查询参数中。

语法

has(name)
has(name, value)

参数

name：要匹配的参数的名称
value：要匹配的参数值以及给定的名称

返回值

一个布尔值

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 2);params.append("foo", 3);params.append("foo", 4);console.log(params.has('foo'));console.log(params.has('age'));console.log(params.has('foo', 4));console.log(params.has('foo', 5));

在这里插入图片描述

has('foo') 返回的是 true，因为查询参数中有这个
params.has('age') 返回的是 false，因为查询参数中没有这个
params.has('foo', 4) 返回的是 true，因为查询参数中有这个
params.has('foo', 5) 返回的是 false ，因为查询参数中没有这个，但是有，1，2，3，4

2.9 keys() 方法

URLSearchParams 接口的 keys() 方法返回一个用于遍历对象中包含的所有键的迭代器。这些键都是字符串对象。

语法

keys()

参数

无

返回值

迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 2);params.append("foo", 3);params.append("foo", 4);for (const key of params.keys()) {console.log(key);}

在这里插入图片描述

2.10 set() 方法

URLSearchParams 接口的 set() 方法用于设置和查询参数相关联的值。如果设置前已经存在多个匹配的值，此方法会删除重复的查询参数；如果查询参数不存在，则创建它。

语法

set(name, value)

参数

name：要设置的参数的键名
value：要设置的参数的值

返回值

无

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 2);params.append("foo", 3);params.append("foo", 4);console.log('set 之前', params.toString());params.set("foo", 4);params.set("age", 22);console.log(params.toString());

在这里插入图片描述

2.11 toString() 方法

URLSearchParams 接口的 toString() 方法返回适用于 URL 中的查询字符串。

语法

toString()

参数

无

返回值

一个不带问号的字符串，如若未设置查询参数则返回空字符串

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 2);params.append("foo", 3);params.append("foo", 4);console.log(params.toString());

在这里插入图片描述

2.12 values() 方法

URLsearchParams 接口的 values() 方法返回一个用于遍历对象中包含的所有键的值的迭代器。这些键都是字符串对象。

语法

values()

参数

无

返回值

迭代器

示例

    let params = new URLSearchParams('?foo=1&bar=2&name=ddg');params.append("foo", 2);params.append("foo", 3);params.append("foo", 4);console.log('查询参数', params.toString());for (const item of params.values()) {console.log(item);}