寫在前面

在前端面試當中，關于 url 相關的問題很常見，而對于 url 請求參數的問題也很常見，大部分以筆試題常見，今天就根據這道面試題一起來看一下。

問題

獲取 url 地址欄?后面的查詢字符串，并以鍵值對形式放到對象里面。

我們以百度為例：

我在百度搜索掘金，url 為以下格式

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=68018901_3_dg&wd=%E6%8E%98%E9%87%91&oq=%25E6%2590%259C%25E7%25B4%25A2&rsv_pq=d2454dd90049702a&rsv_t=598fAS5T78kkZ23tFIcK1kZLSsa4GB8sRQSPvNKJ%2BizDR%2FMcYnE4%2BaylKTnlCrdjTquMiQ&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=10&rsv_sug1=6&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=2760&rsv_sug4=3716

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