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

news2024/9/22 7:24:45

文章目录

    • 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.coloradmin.cn/o/1950938.html

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

相关文章

Pytorch深度学习实践（5）逻辑回归

Pytorch深度学习实践（5）逻辑回归

逻辑回归 逻辑回归主要是解决分类问题 回归任务：结果是一个连续的实数分类任务：结果是一个离散的值 分类任务不能直接使用回归去预测，比如在手写识别中（识别手写 0 − − 9 0 -- 9 0−−9），因为各个类别…
阅读更多...
python毕业设计选题协同过滤算法在音乐推荐系统

python毕业设计选题协同过滤算法在音乐推荐系统

✌网站介绍：✌10年项目辅导经验、专注于计算机技术领域学生项目实战辅导。 ✌服务范围：Java(SpringBoo/SSM)、Python、PHP、Nodejs、爬虫、数据可视化、小程序、安卓app、大数据等设计与开发。 ✌服务内容：免费功能设计、免费提供开题答辩P…
阅读更多...
【进程检测】使用pywin32捕获window进程信息

【进程检测】使用pywin32捕获window进程信息

需求 检测win系统依赖服务进程的运行情况，版本信息（进程检测器）检测内外网连接情况 实现 进程检测 # 使用pywin32获取进程版本信息 def get_version_info(path):try:info GetFileVersionInfo(path, \\)ms info[FileVersionMS]ls info[…
阅读更多...
基于单片机控制的气动机械手设计

基于单片机控制的气动机械手设计

摘 要： 机械手拥有灵活的运动结构，可以在控制系统控制下完成复杂的运动，从而实现高效率的自动化生产方式，因而成为发展工业生产技术的重要方向。气动技术和单片机技术已相当成熟，工业应用广泛，该文将基于单…
阅读更多...
使用 useRequestURL 组合函数访问请求URL

使用 useRequestURL 组合函数访问请求URL

title: 使用 useRequestURL 组合函数访问请求URL date: 2024/7/26 updated: 2024/7/26 author: cmdragon excerpt: 摘要：本文介绍了Nuxt 3中的useRequestURL组合函数，用于在服务器端和客户端环境中获取当前页面的URL信息。通过示例展示了如何在页面中…
阅读更多...
html+css 实现水波纹按钮

html+css 实现水波纹按钮

前言：哈喽，大家好，今天给大家分享htmlcss 绚丽效果！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 文…
阅读更多...
Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

使用 Vue 3 实现左侧列表点击跳转到右侧对应区域的功能 1. 引言 在这篇博客中，我们将展示如何使用 Vue 3 实现一个简单的页面布局，其中左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都…
阅读更多...
云计算实训15——shell脚本、变量、自动化安装脚本、条件判断、循环

云计算实训15——shell脚本、变量、自动化安装脚本、条件判断、循环

一、shell 脚本 1.基本概念 shell脚本就是由Shell命令组成的执行文件，将一些命令整合到一个文件 中，进行处理业务逻辑，脚本不用编译即可运行，它从一定程度上减轻 了工作量，提高了工作效率，还可以批量、定…
阅读更多...
云服务部署项目（Spring + Vue）

云服务部署项目（Spring + Vue）

云计算：腾讯云 操作系统：Ubuntu 22.04.4 LTS 项目：若依前后端分离项目（SpringBoot Vue） 首先要安装基本的一些依赖环境，大家可以看一下我往期的文章： Ubuntu在线JDK Ubuntu在线安装Nginx Ubunt…
阅读更多...
Debain安装PostgreSql

Debain安装PostgreSql

目录 Debian和Centos区别 安装PostgreSql 更新包索引： 安装 PostgreSQL： 配置自动启动和启用 PostgreSQL 服务： 配置postGreSql 切换到 PostgreSQL 用户： 访问 PostgreSQL Shell： 设置密码 退出 PostgreSQL …
阅读更多...
【C++题解】1066. 字符图形2-星号直角

【C++题解】1066. 字符图形2-星号直角

问题&#xff1a;1066. 字符图形2-星号直角 类型&#xff1a;嵌套循环、图形输出 题目描述&#xff1a; 打印字符图形。 输入&#xff1a; 一个整数&#xff08; 0<n<10 &#xff09;。 输出&#xff1a; 一个字符图形。 样例&#xff1a; 输入&#xff1a; 3输…
阅读更多...
集成显卡和独立显卡有什么区别？

集成显卡和独立显卡有什么区别？

显卡&#xff08;Video card&#xff0c;Graphics card&#xff09;全称显示接口卡&#xff0c;又称显示适配器&#xff0c;是计算机最基本配置、最重要的配件之一。平时大家可能都听过集显和独显&#xff0c;那么这两个显卡类别都是什么意思呢&#xff1f; 集成显卡 集成显卡…
阅读更多...
Unity UGUI 之 坐标转换

Unity UGUI 之 坐标转换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 前置知识&#xff1a;…
阅读更多...
混凝土做的风机？风领新能源推出钢-超高性能混凝土体内预应力塔筒

混凝土做的风机？风领新能源推出钢-超高性能混凝土体内预应力塔筒

随着全球能源结构的转型和技术的不断进步&#xff0c;陆上风电行业已正式迈入平价时代。这一里程碑式的转变不仅降低了风电项目的投资门槛&#xff0c;更激发了行业对于机组大型化的热情与追求。在这样的市场下&#xff0c;主流风机制造商纷纷推出10MW平台级别机组&#xff0c;…
阅读更多...
VLAN通讯实验

VLAN通讯实验

目录 拓扑图 需求 需求分析 配置过程 1、手工配置 2、 使用DHCP获得IP地址信息 3、测试全网是否可达 拓扑图 需求 1、PC1、PC3属于VLAN 2 2、PC2、PC4属于VLAN 3 3、通过DHCP使得PC获取IP地址信息 4、全网可达 需求分析 1、先手工配置网段&#xff0c;VLAN 2为192.168.1…
阅读更多...
杭州东网约车管理再出行方面取得的显著成效

杭州东网约车管理再出行方面取得的显著成效

随着科技的飞速发展&#xff0c;网约车已成为人们日常出行的重要选择。在杭州这座美丽的城市&#xff0c;网约车服务更是如雨后春笋般蓬勃发展。特别是杭州东站&#xff0c;作为杭州的重要交通枢纽&#xff0c;网约车管理显得尤为重要。近日&#xff0c;沧穹科技郑重宣告已助力…
阅读更多...
【iOS】 消息传递和消息转发

【iOS】 消息传递和消息转发

消息传递和消息转发 objc_msgSend执行流程消息发送动态方法解析消息转发super面试题 objc_msgSend执行流程 OC中的方法调用&#xff0c;其实都是转化为objc_msgSend函数调用&#xff0c;objc_msgSend的执行流程可以分为3大阶段 消息发送 动态方法解析 消息转发 消息发送 消…
阅读更多...
情绪稳定的人有什么特点？

情绪稳定的人有什么特点？

第一部分&#xff1a;至纯之人&#xff0c;大器晚成 1.1 单纯&#xff0c;不是天真 你知道吗&#xff1f;那些能够成就大事的人&#xff0c;往往在人性上非常单纯。他们对外界的需求很低&#xff0c;更多的是向内寻求。这样的人&#xff0c;他们的内心世界像一片净土&#xff…
阅读更多...
Internet Download Manager（IDM）6.43免费试用体验版下载

Internet Download Manager（IDM）6.43免费试用体验版下载

1. Internet Download Manager&#xff08;IDM&#xff09;是一款功能强大的下载管理器&#xff0c;能够将下载速度提高多达5倍。 2. IDM具备多线程下载、断点续传、自动捕获链接等特性。 IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 idm最新绿色版一…
阅读更多...
HarmonyOS 核心功能：一多特性

HarmonyOS 核心功能：一多特性

简述定义和目标&#xff0c;分述界面级&#xff08;核心&#xff09;、功能级、工程级的一多开发 定义&#xff1a; 一套代码&#xff0c;一次开发&#xff0c;多端按需部署 目标&#xff1a;支持开发者快速开发多设备上的应用 一 界面级一多开发&#xff08;重点&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023