写在前面

在前端面试当中，关于 url 相关的问题很常见，而对于 url 请求参数的问题也很常见，大部分以笔试题常见，今天就根据这道面试题一起来看一下。

问题

获取 url 地址栏 ? 后面的查询字符串，并以键值对形式放到对象里面。

我们以百度为例：

可以看到，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] = 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 对象中即可