前端面试题-怎样获取 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 对象中即可

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

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 05:14:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 05:14:04       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 05:14:04       58 阅读
  4. Python语言-面向对象

    2024-07-13 05:14:04       69 阅读

热门阅读

  1. Linux学习笔记(三)文件权限

    2024-07-13 05:14:04       28 阅读
  2. 避免 WebSocket 连接被拒绝

    2024-07-13 05:14:04       24 阅读
  3. 小程序需要做等保测评吗?

    2024-07-13 05:14:04       20 阅读
  4. wireshark与tcpdump使用

    2024-07-13 05:14:04       21 阅读
  5. 韩国裸机云大宽带服务器主要特点和优势

    2024-07-13 05:14:04       25 阅读
  6. 【日常bug记录】el-checkbox 绑定对象数组

    2024-07-13 05:14:04       20 阅读
  7. UniVue@v1.3.0版本发布

    2024-07-13 05:14:04       27 阅读
  8. WXML,WXSS和HTML,CSS的区别

    2024-07-13 05:14:04       23 阅读
  9. ODrive学习笔记一:开发环境搭建

    2024-07-13 05:14:04       20 阅读
  10. Eureka 介绍与使用

    2024-07-13 05:14:04       26 阅读
  11. Perl基础入门指南:从零开始掌握Perl编程

    2024-07-13 05:14:04       30 阅读
  12. 认识string(二)详解

    2024-07-13 05:14:04       35 阅读
  13. Ubuntu下安装配置和调优Docker,支持IPV6

    2024-07-13 05:14:04       26 阅读
  14. Vue的生命周期函数有哪些?详细说明

    2024-07-13 05:14:04       26 阅读