前端面试题-怎样获取 url 地址栏 ? 后面的查询字符串,并以键值对形式放到对象里面

哈喽小伙伴们大家好!今天继续更新面试题系列文章

以百度为例:

我们以百度搜索掘金,url 为以下格式

https://cn.bing.com/search?q=%E7%A8%80%E5%9C%9F%E6%8E%98%E9%87%91&form=ANNTH1&refig=668f422a37c343b6b0f4ac940f65d043&pc=EDGENTP&adppc=EdgeStart&pqasv=%E7%A8%80%E5%9C%9F&pqlth=2&assgl=4&sgcn=%E7%A8%80%E5%9C%9F%E6%8E%98%E9%87%91&sgtpv=HS&swbcn=10&smvpcn=0&cvid=668f422a37c343b6b0f4ac940f65d043&clckatsg=1&hsmssg=0

可以看到,url 的 ?后面携带了很多的请求参数

我们先来获取 ? 后面的内容

首先使用 window.location 打印看看

 可以看到 searh 里面是我们想要的内容

没问题,所以使用 window.location.search可以获取 ? 后面的内容

但是现在我们不仅需要获取 ? 后面的内容,还需要将请求参数提取出来。

一般情况下我们可能使用 & 先进行分割,然后再使用 = 进行分割,最后循环提取出来,这样可以实现,但是不是特别方便,接下来介绍一个方法,很适合这类问题

具体怎样拿到呢?

我们可以使用 URLSearchParams

 在示例当中看到,可以直接使用 for of 迭代查询参数

let windowUrl = window.location.search

let bUrl = new URLSearchParams(windowUrl)

for (const [key, value] of bUrl)

{

obj[key] = value console.log('key: ', key); console.log('value: ', value);

}

可以看到,我们直接了拿到相对应的请求参数

最后将解构出来的数据存到对象里就行了

let obj = {}

for (const [key, value] of bUrl)

{ obj[key] = value }

console.log('obj: ', obj)

另外,我们可以通过 window.location.search 进行模拟代码,所以直接在vscode里面调试不太方便,这里推荐大家使用,源代码 - 片段 - 新建片段进行调试代码,比直接在控制台写代码方便一些,写完右键执行,就可以在控制台看结果了。

let windowUrl = window.location.search

let bUrl = new URLSearchParams(windowUrl)

let obj = {} for (const [key, value] of bUrl)

{ obj[key] = value console.log('key: ', key);

console.log('value: ', value); }

console.log('obj: ', obj)

 总结

首先我们使用 window.location.search  获取 ? 后面的请求参数

在获取到请求后直接使用 URLSearchParams 进行处理

对处理完的数据进行 for of 循环拿到里面的请求参数

最后直接存到 obj 对象中即可

好啦,本期就到这里,我们下期见!

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

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

相关文章

免费的AI抠图工具 毫秒级抠图 离线可用 -鲜艺AI抠图

鲜艺AI抠图是一款免费的AI抠图工具,不登录、不联网,内嵌 AI 模型,快至毫秒级抠图,支持批量抠图,支持点击按钮选择图片、拖入图片、粘贴图片、粘贴图片链接、从网页拖入图片,支持Windows和macos,…

使用 NumPy 及其相关库(如 pandas、scikit-learn 等)时,由于 NumPy 的版本不兼容或者某些依赖库与 NumPy 的版本不匹配

题意: numpy.dtype size changed, may indicate binary incompatibility. Expected 96 from C header, got 88 from PyObject 问题背景: I want to call my Python module from the Matlab. I received the error: Error using numpy_ops>init thi…

戴尔inspiron如何独显直连?

🏆本文收录于《CSDN问答解惑-专业版》专栏,主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案,希望能够助你一臂之力,帮你早日登顶实现财富自由🚀;同时,欢迎大家关注&&收…

解决安卓tv 蓝牙遥控器配对后输入法弹不出来的问题

t972在蓝牙配对后,自带的LatinIME 输入法会出现弹不出来的现象。 经过分析,主要为蓝牙的kl 文件适配存在问题。解决如下: 1.新建 kl文件 这个需要结合选用的遥控器来设定名称,我这边的遥控器是按照如下配置的 Vendor_2b54_Pr…

用户登陆实现前后端JWT鉴权

目录 一、JWT介绍 二、前端配置 三、后端配置 四、实战 一、JWT介绍 1.1 什么是jwt JWT(JSON Web Token)是一种开放标准(RFC 7519),用于在各方之间以安全的方式传输信息。JWT 是一种紧凑、自包含的信息载体&…

【Android面试八股文】组件化在项目中有什么意义?

一、没有组件化会出现什么问题? 早期的单一分层模式 问题一:无论分包怎么做,随着项目增大,项目失去层次感,后面接手的人扑街问题二:包名约束太弱,稍有不注意,就会不同业务包直接互相调用,代码高耦合问题三:多人开发在版本管理中,容易出现代码覆盖冲突等问题二、组件…

【Linux】Linux的账号和用户组

管理员的工作中,相当重要的一环就是【管理账号】。 因为整个系统都是你在管理,并且所有一般用户的账号申请,都必须要通过你的协助才行,所以你就必须要了解一下如何管理好一个服务器主机的账号。 在管理Linux主机的账号时&#xff…

Django 删除单行数据

1,添加模型 from django.db import modelsclass Post(models.Model):title models.CharField(max_length200)content models.TextField()pub_date models.DateTimeField(date published)class Book(models.Model):title models.CharField(max_length100)author…

121. 小红的区间翻转(卡码网周赛第二十五期(23年B站笔试真题))

题目链接 121. 小红的区间翻转(卡码网周赛第二十五期(23年B站笔试真题)) 题目描述 小红拿到了两个长度为 n 的数组 a 和 b,她仅可以执行一次以下翻转操作:选择a数组中的一个区间[i, j],&#x…

顺序表算法 - 移除元素

. - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/remove-element/description/思路: 代码: // numsSize表示数组的长度 …

网络安全——防御课实验二

在实验一的基础上,完成7-11题 拓扑图 7、办公区设备可以通过电信链路和移动链路上网(多对多的NAT,并且需要保留一个公网IP不能用来转换) 首先,按照之前的操作,创建新的安全区(电信和移动)分别表示两个外网…

Readiris PDF Corporate / Business v23 解锁版安装教程 (PDF管理软件)

前言 Readiris PDF Corporate / Business 是一款高性能的 OCR(光学字符识别)软件,能够帮助用户将纸质文档、PDF 文件或图像文件转换为可编辑和可搜索的电子文本。该软件提供专业级的功能和特性,非常适合企业和商业使用。使用 Rea…

基于lstm的股票Volume预测

LSTM(Long Short-Term Memory)神经网络模型是一种特殊的循环神经网络(RNN),它在处理长期依赖关系方面表现出色,尤其适用于时间序列预测、自然语言处理(NLP)和语音识别等领域。以下是…

LabVIEW人工模拟肺控制系统开发

开发了一种创新的主被动一体式人工模拟肺模型,通过LabVIEW开发的上位机软件,实现了步进电机驱动系统的精确控制和多种呼吸模式的模拟。该系统不仅能够在主动呼吸模式下精确模拟快速呼吸、平静呼吸和深度呼吸,还能在被动模式下通过PID控制实现…

C++20中的consteval说明符

在C20中,立即函数(immediate function)是指每次调用该函数都会直接或间接产生编译时常量表达式(constant expression)的函数。这些函数在其返回类型前使用consteval关键字进行声明。 立即函数是constexpr函数,具体情况取决于其要求。与constexpr相同&…

神经网络以及简单的神经网络模型实现

神经网络基本概念: 神经元(Neuron): 神经网络的基本单元,接收输入,应用权重并通过激活函数生成输出。 层(Layer): 神经网络由多层神经元组成。常见的层包括输入层、隐藏层…

springboot健身房预约管理系统-计算机毕业设计源码75535

目录 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.1.1经济可行性 2.1.2技术可行性 2.1.3操作可行性 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 …

Gradle学习-6 APT 实现一个路由跳转框架(APT、发布maven仓库)

Annotation 注解:注解是元数据,即描述数据的数据APT(Annotation Processing Tool)注解处理器 APT工作原理 Demo介绍 APT项目地址 使用APT maven仓库地址 (1)项目配置 Gradle 8.2AGP 8.2.0Java jdk 17…

调整网络安全策略以适应不断升级的威胁形势

关键网络安全统计数据和趋势 当今数字时代网络安全的重要性

Python爬虫速成之路(2):爬天气情况

hello hello~ ,这里是绝命Coding——老白~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页:绝命Coding-CSDN博客 &a…