【日常记录】【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.mzph.cn/diannao/50465.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

百度搜索X唐朝诡事录跨界联动影视智能体，集追剧探案于一体！

百度搜索X唐朝诡事录跨界联动影视智能体，集追剧探案于一体！

想必这几天大家都已经被 #唐朝诡事录好看#、#唐朝诡事录你真的火了# 刷屏了，时隔两年，霸榜热门大剧《唐朝诡事录之西行》终于火热回归啦！ 一文一武双男主设定只为专心攻破悬案，正反派全都智商在线，是一部不可多得的良…
阅读更多...
PaliGemma：A versatile 3B VLM for transfer

PaliGemma：A versatile 3B VLM for transfer

1.model 1.1 Architecture 图像分辨率为固定的正方形，224，448，896，这导致每种模型都有固定数量的图像token，256，1024，4096。图像在最前面，无需特殊的位置标记，BOS标记文本的开始，\n作为SEP token，不出现在前缀中，单独对SEP进行标记，以避免它与前缀的结束或后缀的…
阅读更多...
Navicat图形化管理工具安装教程

Navicat图形化管理工具安装教程

1、Navicat简介 Navicat 是一套快速、可靠的数据库管理工具，专为简化数据库的管理及降低系统管理成本而开发。它的设计符合数据库管理员、开发人员及中小企业的需要。Navicat使用直觉化的图形用户界面，让用户能够安全简单的方式创建、组织、访问并共用信…
阅读更多...
如何检查代理IP地址是否被占用

如何检查代理IP地址是否被占用

使用代理IP时，有时候会发现IP仍然不可用，可能是因为已经被其他用户或者网络占用了。为了检测代理IP是否被占用，我们可以采用一些方法进行验证测试，以保证代理IP的有效性和稳定性。 1.ARP缓存方法 ARP缓存法是一种简单有效的检测代…
阅读更多...
Tinygrad，llama3，Reward Model

Tinygrad，llama3，Reward Model

目录 Tinygrad 与其他框架的比较 llama3 Reward Model Tinygrad 是一个轻量级的深度学习框架，由George Hotz（也被称为geohot）开发。以下是对Tinygrad的详细介绍： 与其他框架的比较 与PyTorch、TensorFlow等更全面的深度学习框架相比，Tinygrad在功能上可能有所限制，…
阅读更多...
Unity UGUI 之 事件接口

Unity UGUI 之 事件接口

本文仅作学习笔记与交流，不作任何商业用途 本文包括但不限于unity官方手册，唐老狮，麦扣教程知识，引用会标记，如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本，请注意分别 1.什么是事件接口&…
阅读更多...
【github】使用KeepassXC 解决github Enable two-factor authentication (2FA) 第二因子认证

【github】使用KeepassXC 解决github Enable two-factor authentication (2FA) 第二因子认证

下载 https://github.com/keepassxreboot/keepassxc/releases/download/2.7.9/KeePassXC-2.7.9-Win64.msi 代理地址 https://dgithub.xyz/keepassxreboot/keepassxc/releases/download/2.7.9/KeePassXC-2.7.9-Win64.msi 由于该软件不允许截图，以下操作参考官网 …
阅读更多...
JavaScript模拟滑动手势

JavaScript模拟滑动手势

双击回到顶部 左滑动 右滑动 代码展示 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>Gesture…
阅读更多...
力扣高频SQL 50题（基础版）第八题

力扣高频SQL 50题（基础版）第八题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第八题1581. 进店却未进行过交易的顾客题目说明思路分析实现过程准备数据&#xff1a;实现方式&#xff1a;结果截图&#xff1a;总结&#xff1a; 力扣高频SQL 50题&#xff08;基础版&#xff09;第八题 1581. 进店…
阅读更多...
jenkins删除历史构建记录

jenkins删除历史构建记录

1、 登录jenkins&#xff0c;进入【Manage Jenkins】-【Script Console】&#xff0c;输入&#xff1a; def jobName "Test" //删除的项目名称 def maxNumber 60 // 保留的最小编号&#xff0c;意味着小于该编号的构建都将被删除 Jenkins.instance.getItemByFullN…
阅读更多...
【反证法】932. 漂亮数组

【反证法】932. 漂亮数组

本文涉及知识点 分治 数学 反证法 LeetCode932. 漂亮数组 如果长度为 n 的数组 nums 满足下述条件&#xff0c;则认为该数组是一个 漂亮数组 &#xff1a; nums 是由范围 [1, n] 的整数组成的一个排列。 对于每个 0 < i < j < n &#xff0c;均不存在下标 k&#x…
阅读更多...
华为Ascend C算子开发（中级）考试

华为Ascend C算子开发（中级）考试

华为Ascend C算子开发&#xff08;中级&#xff09;考试题 提示&#xff1a;这个是河北廊坊Ascend C算子开发考试题和答案&#xff0c;仅供参考&#xff0c;因为不确定其他城市的考试题是否也是一样 文章目录 华为Ascend C算子开发&#xff08;中级&#xff09;考试题一、op_ho…
阅读更多...
Python爬虫技术 第13节 HTML和CSS选择器

Python爬虫技术 第13节 HTML和CSS选择器

在爬虫技术中&#xff0c;解析和提取网页数据是核心部分。HTML 和 CSS 选择器被广泛用于定位网页中的特定元素。下面将详细介绍这些选择器如何在 Python 中使用&#xff0c;特别是在使用像 Beautiful Soup 或 Scrapy 这样的库时。 HTML 选择器 HTML 选择器基于 HTML 元素的属性…
阅读更多...
基于微信小程序+SpringBoot+Vue的美食推荐平台(带1w+文档)

基于微信小程序+SpringBoot+Vue的美食推荐平台(带1w+文档)

基于微信小程序SpringBootVue的美食推荐平台(带1w文档) 基于微信小程序SpringBootVue的流浪动物救助(带1w文档) 当微信小程序占领了多半江山&#xff0c;目前不分年龄和种族&#xff0c;使用频率最高&#xff0c;覆盖面积最广。使用人群使用的大多数都是微信小程序。目前国内最…
阅读更多...
Kithara和Halcon （二）

Kithara和Halcon （二）

Kithara使用Halcon QT 进行二维码实时识别 目录 Kithara使用Halcon QT 进行二维码实时识别Halcon 简介以及二维码检测的简要说明Halcon 简介Halcon的二维码检测功能 Qt应用框架简介项目说明关键代码抖动测试测试平台&#xff1a;测试结果&#xff1a; 开源源码 Halcon 简介以…
阅读更多...
STM32CubeMX的介绍与简单使用

STM32CubeMX的介绍与简单使用

STM32CubeMX提供了一个直观的图形用户界面&#xff0c;允许用户通过简单的操作完成对STM32微控制器的配置&#xff0c;包括引脚分配、时钟配置、外设初始化等。专为STM32微控制器设计&#xff0c;旨在帮助开发者轻松配置和初始化STM32微控制器。用户可以通过拖拽和连接来配置芯…
阅读更多...
关键词查找【Aho-Corasick 算法】

关键词查找【Aho-Corasick 算法】

【全程干货】程序员必备算法&#xff01;AC自动机算法敏感词匹配算法&#xff01;动画演示讲解&#xff0c;看完轻松掌握&#xff0c;面试官都被你唬住&#xff01;&#xff01;_哔哩哔哩_bilibili 著名的多模匹配算法 引入依赖&#xff1a; <dependency><groupId>…
阅读更多...
Vue3 Pinia/组件通信

Vue3 Pinia/组件通信

2. pinaia 符合直觉的Vue.js状态管理库 集中式状态&#xff08;数据&#xff09;管理 官网 2.1 搭建pinaia环境 第一步&#xff1a;npm install pinia 第二步&#xff1a;操作src/main.ts import { createApp } from vue import App from ./App.vue/* 引入createPinia&…
阅读更多...
Java面试八股之什么是声明式事务管理，spring怎么实现声明式事务管理？

Java面试八股之什么是声明式事务管理，spring怎么实现声明式事务管理？

什么是声明式事务管理&#xff0c;spring怎么实现声明式事务管理&#xff1f; 声明式事务管理是一种编程范式&#xff0c;它允许开发人员通过声明性的配置或注解&#xff0c;而不是硬编码事务处理逻辑&#xff0c;来指定哪些方法或类应该在其上下文中执行事务。这种方法将事务…
阅读更多...
【PHP】系统的登录和注册

【PHP】系统的登录和注册

一、为什么要学习系统的登录和注册 系统的登录和注册可能存在多种漏洞&#xff0c;这些漏洞可能被恶意攻击者利用&#xff0c;从而对用户的安全和隐私构成威胁。通过学习系统的登录和注册理解整个登录和注册的逻辑方便后续更好站在开发的角度思考问题发现漏洞。以下是一些常见…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023