vc 做网站源码,设计师做兼职的网站,网站未续费到期后打开会怎样,个人可以建门户网站吗写在前面
在前端面试当中#xff0c;关于 url 相关的问题很常见#xff0c;而对于 url 请求参数的问题也很常见#xff0c;大部分以笔试题常见#xff0c;今天就根据这道面试题一起来看一下。
问题
获取 url 地址栏?后面的查询字符串#xff0c;并以键值对形式放到对象…写在前面
在前端面试当中关于 url 相关的问题很常见而对于 url 请求参数的问题也很常见大部分以笔试题常见今天就根据这道面试题一起来看一下。
问题
获取 url 地址栏?后面的查询字符串并以键值对形式放到对象里面。
我们以百度为例
我在百度搜索掘金url 为以下格式 https://www.baidu.com/s?ieutf-8f8rsv_bp1tn68018901_3_dgwd%E6%8E%98%E9%87%91oq%25E6%2590%259C%25E7%25B4%25A2rsv_pqd2454dd90049702arsv_t598fAS5T78kkZ23tFIcK1kZLSsa4GB8sRQSPvNKJ%2BizDR%2FMcYnE4%2BaylKTnlCrdjTquMiQrqlangcnrsv_dltbrsv_enter1rsv_sug310rsv_sug16rsv_sug7100rsv_sug20rsv_btypetinputT2760rsv_sug43716 可以看到url的 后面有很多请求参数
我们先来获取 ? 后面的内容
使用 window.location 打印看看 可以看到 searh 里面是我们想要的内容打印看看 没问题所以使用 window.location.search可以获取 ? 后面的内容
但是现在我们不仅需要获取 ? 后面的内容还需要将请求参数提取出来。
一般情况下我们可能使用 先进行分割然后再使用 进行分割最后循环提取出来这样可以实现但是不是特别方便接下来介绍一个方法很适合这类问题。
解决
使用 URLSearchParams
MDN 官方解释如下 URLSearchParams - Web API | MDN (mozilla.org) 在示例当中看到可以直接使用 for of 迭代查询参数
我们看一下迭代出来的结果是什么 let windowUrl window.location.search let bUrl new URLSearchParams(windowUrl)for (const [key, value] of bUrl) {obj[key] valueconsole.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] valueconsole.log(key: , key);console.log(value: , value);}console.log(obj: , obj) 总结
首先我们使用 window.location.search 获取 ? 后面的请求参数
在获取到请求后直接使用 URLSearchParams 进行处理
对处理完的数据进行 for of 循环拿到里面的请求参数
最后直接存到 obj 对象中即可
