前端面试题-怎样获取 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 对象中即可
好啦,本期就到这里,我们下期见!
原文地址：https://blog.csdn.net/m0_62300955/article/details/140350423
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！