【日常记录】【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);

在这里插入图片描述

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

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

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());

在这里插入图片描述

  1. 如若指定了删除的键名称，这个键名称存在一个，那么只会删除这一个
  2. 如若指定了删除的键名称，这个键名称存在多个，那么这多个都会删除
  3. 如若指定了删除的键名称、键的值，那么只会删除 键名称、键值一样的，如若这俩一样还存在多个，那么这多个都会删除，只要这俩一样都会删除
    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);
    }

在这里插入图片描述

参考链接

  • URLSearchParams MDN

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/870079.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

懒人精灵安卓版纯本地离线文字识别插件

懒人精灵安卓版纯本地离线文字识别插件

目的 懒人精灵是一款可以模拟鼠标和键盘操作的自动化工具。它可以帮助用户自动完成一些重复的、繁琐的任务，节省大量人工操作的时间。懒人精灵也包含图色功能，识别屏幕上的图像，根据图像的变化自动执行相应的操作。本篇文章主要讲解下更优秀的…
阅读更多...
2019数字经济公测大赛-VMware逃逸

2019数字经济公测大赛-VMware逃逸

文章目录 环境搭建漏洞点exp 环境搭建 ubuntu :18.04.01vmware: VMware-Workstation-Full-15.5.0-14665864.x86_64.bundle 这里环境搭不成功。。patch过后就报错，不知道咋搞 发现可能是IDA加载后的patch似乎不行对原来的patch可能有影响，重新下了patch&…
阅读更多...
通信原理-思科实验三：无线局域网实验

通信原理-思科实验三：无线局域网实验

实验三 无线局域网实验 一：无线局域网基础服务集 实验步骤： 进入物理工作区，导航选择 城市家园; 选择设备 AP0，并分别选择Laptop0、Laptop1放在APO范围外区域 修改笔记本的网卡，从以太网卡切换到无线网卡WPC300N 切…
阅读更多...
Web前端：HTML篇（一）

Web前端：HTML篇（一）

HTML简介： 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器…
阅读更多...
集合的面试题和五种集合的详细讲解

集合的面试题和五种集合的详细讲解

20240724 一、面试题节选二、来自于b站人人都是程序员的视频截图 （感谢人人都是程序员大佬的视频，针对于个人复习。） 一、面试题节选 二、来自于b站人人都是程序员的视频截图 hashmap： 唯一的缺点，无序&#xf…
阅读更多...
【JavaScript】`Map` 数据结构

【JavaScript】`Map` 数据结构

文章目录 一、Map 的基本概念二、常见操作三、与对象的对比四、实际应用场景 在现代 JavaScript 中，Map 是一种非常重要且强大的数据结构。与传统的对象（Object）不同，Map 允许您使用各种类型的值作为键，不限于字符串或…
阅读更多...
DjangoRF实战-2-apps-users

DjangoRF实战-2-apps-users

1、用户模块 创建一个用户模块子应用，用来管理用户，和认证和授权。 1.1根目录创建apps， 为了使用方便，还需要再pycharm中设置一下资源路径，就可以自动提示 1.2注册子应用 1.3添加应用根目录到环境变量path python导…
阅读更多...
7月21日，贪心练习

7月21日，贪心练习

大家好呀，今天带来一些贪心算法的应用解题、 一，柠檬水找零 . - 力扣（LeetCode） 解析： 本题的贪心体现在对于20美元的处理上，我们总是优先把功能较少的10元作为找零，这样可以让5元用处更大 …
阅读更多...
Golang实现免费天气预报获取（OpenWeatherMap）

Golang实现免费天气预报获取（OpenWeatherMap）

最近接到公司的一个小需求，需要天气数据，所以就做了一个小接口，供前端调用 这些数据包括六个元素，如降水、风、大气压力、云量和温度。有了这些，你可以分析趋势，知道明天的数据来预测天气。 1.1 工具简介 …
阅读更多...
Linux 安装 GDB （无Root 权限）

Linux 安装 GDB （无Root 权限）

引入 在Linux系统中，如果你需要在集群或者远程操作没有root权限的机子，安装GDB（GNU调试器）可能会有些限制，因为通常安装新软件或更新系统文件需要管理员权限。下面我们介绍可以在没有root权限的情况下安装GDB&#xf…
阅读更多...
vue3响应式用法（高阶性能优化）

vue3响应式用法（高阶性能优化）

文章目录 前言：一、 shallowRef()二、 triggerRef()三、 customRef()四、 shallowReactive()五、 toRaw()六、 markRaw()七、 shallowReadonly()小结： 前言： 翻别人代码时，总结发现极大部分使用vue3的人只会用ref和reactive处理响…
阅读更多...
谷歌AI拿下IMO奥数银牌！6道题轻松解出4道～

谷歌AI拿下IMO奥数银牌！6道题轻松解出4道～

本周四，谷歌DeepMind团队宣布了一项令人瞩目的成就：：用 AI 做出了今年国际数学奥林匹克竞赛 IMO 的真题，并且距拿金牌仅一步之遥。这一成绩不仅标志着人工智能在数学推理领域的重大突破，也引发了全球范围内的广泛关注和…
阅读更多...
时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法（CPO）优化VMD二次分解

时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法（CPO）优化VMD二次分解

时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法（CPO）优化VMD二次分解 目录 时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法（CPO）优化VMD二次分解效果一览基本介绍程序设计参考资料 效果一览…
阅读更多...
leetcode-148. 排序链表

leetcode-148. 排序链表

题目描述 给你链表的头结点 head ，请将其按 升序 排列并返回 排序后的链表 。 示例 1： 输入：head [4,2,1,3] 输出：[1,2,3,4]示例 2： 输入：head [-1,5,3,4,0] 输出：[-1,0,3,4,5]示例 3&#x…
阅读更多...
UFO：革新Windows操作系统交互的UI聚焦代理

UFO：革新Windows操作系统交互的UI聚焦代理

人工智能咨询培训老师叶梓 转载标明出处 人机交互的便捷性和效率直接影响着我们的工作和生活质量。尽管现代操作系统如Windows提供了丰富的图形用户界面（GUI），使得用户能够通过视觉和简单的点击操作来控制计算机，但随着应用程序功…
阅读更多...
javaEE-04-Filter

javaEE-04-Filter

文章目录 FilterFilter 的生命周期FilterConfig类FilterChain过滤器链Filter 的拦截路径 Filter Filter 过滤器它是 JavaWeb 的三大组件之一,它是 JavaEE 的规范。也就是接口,它的作用是：拦截请求，过滤响应。 Filter的工作流程图解： 以管…
阅读更多...
HarmonyOS NEXT零基础入门到实战-第四部分

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为 系统组件， 由开发者定义的称为 自定义组件。 源代码： Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…
阅读更多...
【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十五章 Pinctrl和GPIO子系统实验

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十五章 Pinctrl和GPIO子系统实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺，提供更快的速度和更高的电源效率;四核Cortex-A53，单核Cortex-M4，多达五个内核 ，主频高达1.8GHz，2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…
阅读更多...
神经网络拟合任何函数的数学原理

神经网络拟合任何函数的数学原理

神经网络拟合任何函数的数学原理 神经网络拟合能力的数学表达 神经网络之所以理论上可以拟合任何函数，其核心在于其多层的结构和非线性的激活函数。通过增加层数和神经元数量，神经网络可以逼近复杂的函数关系。这一过程可以通过万能近似定理&#xff08…
阅读更多...
Vue中的diff算法

Vue中的diff算法

文章目录 diff算法是什么比较方式源码分析patchpatchVnodeupdateChildren小结Vue3中diff算法优化diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 其有两个特点： 比较只会在同层级进行，不会跨层级比较在dff比较的过程中，循环从两边向中间比较（首位交叉…
阅读更多...
最新文章

Copyright @ 2022~2023