前端面试题-怎样获取 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,一经查实,立即删除!

相关文章

OceanBase 配置项系统变量实现及应用详解(2):系统变量的定义及使用场景

在上一篇博客,配置项的定义及使用方法,详细阐述了配置项的概念及其基本应用方式,这些配置项能够调控集群或租户的行为方式。然而,在实际使用OceanBase的过程中,我们有时仅希望针对当前会话调整某些行为特性&#xff0c…

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

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

一次业务的批量数据任务的处理优化

文章目录 一次业务的批量数据任务的处理优化业务背景1.0版本 分批处理模式2.0版本 平衡任务队列模式3.0版本 优化调度平衡任务队列模式总结 一次业务的批量数据任务的处理优化 业务背景 一个重新生成所有客户的财务业务指标数据的批量数据处理任务。 1.0版本 分批处理模式 …

使用 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…

Java中的List集合

一、ArrayLIst集合 ArrayList的特点 ArrayList实现了Collection接口ArrayList内部封装了一个Object类型的对象,初始长度为10,且长度可变ArrayList集合使用数组实现所以查询快,但是增删慢(因为需要移动元素)ArrayList是不能保证线程安全的 …

戴尔inspiron如何独显直连?

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

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

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

java基础,接口和抽象类

一&#xff1a;接口和抽象类 ①接口的定义&#xff1a; 声明方式&#xff1a; 接口使用interface关键字来声明&#xff0c;后跟接口的名称和接口体&#xff08;包含常量和方法声明的代码块&#xff09; public interface ObjectService extends IService<ObjectDO> {/…

Vue 中 v-pre、v-once、v-cloak 标签的深度解析与案例展示

目录 v-pre v-once ​​​​​​​v-cloak ​​​​​​​v-cloak介绍 ​​​​​​​插值表达式闪烁问题 v-pre 当使用 v-pre 指令时,不会进行编译操作。所有的 Vue 模板语法都将得以完整保留,并会按照其初始的形态进行渲染。其中,最为常见的应用场景便是用于展示…

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

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

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

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

【Linux】Linux的账号和用户组

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

Linux下mysql数据库的导入与导出以及查看端口

一&#xff1a;Linux下导出数据库 1、基础导出 要在Linux系统中将MySQL数据库导出&#xff0c;通常使用mysqldump命令行工具。以下是一个基本的命令示例&#xff0c;用于导出整个数据库&#xff1a; mysqldump -u username -p database_name > export_filename.sql 其中&a…

Django 删除单行数据

1&#xff0c;添加模型 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. 小红的区间翻转&#xff08;卡码网周赛第二十五期&#xff08;23年B站笔试真题&#xff09;&#xff09; 题目描述 小红拿到了两个长度为 n 的数组 a 和 b&#xff0c;她仅可以执行一次以下翻转操作&#xff1a;选择a数组中的一个区间[i, j]&#xff0c;&#x…

【spring boot starter的自定义和学习笔记】

spring boot starter的自定义和理解 author:shengfq date:2024-07-14 version:1.0 title:spring boot starter的自定义和理解 1.基本概念 Starter是Spring Boot的四大核心功能特性之一&#xff0c;除此之外&#xff0c;Spring Boot还有自动装配、Actuator监控等特性。 Sprin…

顺序表算法 - 移除元素

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

【2024年全国青少信息素养大赛c++初中复赛集训第一天编程题分享】

目录 题目 1:星际旅行者的紧急求助 题目 2:失落的文明遗迹 题目 3:时间之门的密码 题目5,输出多进制数 题目6、乒乓球 题目7、明明的随机数 题目8、烤鸡 题目9、排队接水 题目 10:魔法森林的迷宫 题目 11:校园植树节活动 题目 12:小学生数学竞赛排名 题目 1:…

力扣224.基本计算器

力扣224.基本计算器 一个栈存符号 并记录当前数的符号遍历到一个数就存入答案 class Solution {public:int calculate(string s) {stack<int> st({1});int sign 1;int res0;int number;int n s.size();int i0;while(i<n) {if(isdigit(s[i])){number 0;while(i &…

python+pygame实现五子棋人机对战之五

pythonpygame实现五子棋人机对战之一 pythonpygame实现五子棋人机对战之二 pythonpygame实现五子棋人机对战之三 pythonpygame实现五子棋人机对战之四 在之前的文章中已经完成了所有的基础工作&#xff0c;剩下的就是把空填上就可以了。 六、 完成程序 # encoding:utf-8…