哈喽小伙伴们大家好!今天继续更新面试题系列文章
以百度为例:
我们以百度搜索掘金,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 对象中即可
好啦,本期就到这里,我们下期见!