摘要：是需要刪除的鍵值名稱。創(chuàng)建一個測試用對象顯示鍵值對獲取指定搜索參數(shù)的第一個值。為參數(shù)添加第二個值輸出返回判斷是否存在此搜索參數(shù)。返回此對象包含了鍵值對的所有鍵名。具體的使用方法大家可以參照庫的相關(guān)說明。

在之前發(fā)的工具方法文章的留言中有人就關(guān)于驗(yàn)證網(wǎng)址的操作時可以使用URL對象，之后有人提到了URLSearchParams這個URL對象接口。由于之前沒有接觸過，所以搜索了一下具體的用處，發(fā)現(xiàn)這個接口的功能很實(shí)用，特此整理分享一下。

URLSearchParams 接口定義了一些實(shí)用的方法來處理 URL 的查詢字符串。參照

從而我們可以知道，它是用來處理URL相關(guān)的。那具體都有哪些功能呢？

首先，我們調(diào)用new URLSearchParams()會返回一個 URLSearchParams 對象實(shí)例。在這個實(shí)例下面我們可以調(diào)用以下方法：

append(name, value):插入一個指定的鍵/值對作為新的搜索參數(shù)。
其中name是需要插入搜索參數(shù)的鍵名，value是需要插入搜索參數(shù)的對應(yīng)值。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//添加第二個foo搜索參數(shù)。
params.append("foo", 4);
params.toString();
// "foo=1&bar=2&foo=4"

delete(name):從搜索參數(shù)列表里刪除指定的搜索參數(shù)及其對應(yīng)的值。
name是需要刪除的鍵值名稱。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//添加第二個foo搜索參數(shù)。
params.delete("foo");
params.toString();
// "bar=2"

entries():返回一個iterator可以遍歷所有鍵/值對的對象。

// 創(chuàng)建一個測試用 URLSearchParams 對象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 顯示鍵/值對
for(var pair of searchParams.entries()) {
   console.log(pair[0]+ ", "+ pair[1]); 
}

// key1, value1
// key2, value2

get(name):獲取指定搜索參數(shù)的第一個值。
name是將要返回的參數(shù)的鍵名。返回一個USVString；如果沒有，則返回null。
如果一個頁面的URL是 https://example.com/?name=Jonathan&age=18 ，你可以這樣解析參數(shù)name和age:

let params = new URLSearchParams(document.location.search.substring(1));
let name = params.get("name"); // is the string "Jonathan"
let age = parseInt(params.get("age"), 10); // is the number 18

// 查找一個不存在的鍵名則返回 null:
let address = params.get("address"); // null

getAll(name):獲取指定搜索參數(shù)的所有值，返回是一個數(shù)組。
name是返回的參數(shù)的名稱。

let url = new URL("https://example.com?foo=1&bar=2"); 
let params = new URLSearchParams(url.search.slice(1)); 

//為foo參數(shù)添加第二個值 
params.append("foo", 4);

console.log(params.getAll("foo"))" //輸出 ["1","4"].

has(name):返回 Boolean 判斷是否存在此搜索參數(shù)。
name 是我們要查詢的參數(shù)的鍵名。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

params.has("bar") === true; //true

keys():返回iterator 此對象包含了鍵/值對的所有鍵名。

// 建立一個測試用URLSearchParams對象
let searchParams = new URLSearchParams("key1=value1&key2=value2"); 

// 輸出鍵值對
for(var key of searchParams.keys()) { 
  console.log(key); 
}

// key1
// key2

set(name, value):設(shè)置一個搜索參數(shù)的新值，假如原來有多個值將刪除其他所有的值。
其中name是需要插入修改參數(shù)的鍵名，value是需要插入搜索參數(shù)的新值。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//Add a third parameter.
params.set("baz", 3);

sort(): 按鍵名排序。

// Create a test URLSearchParams object 
let searchParams = new URLSearchParams("c=4&a=2&b=3&a=1"); 

// Sort the key/value pairs
searchParams.sort();

// Display the sorted query string
console.log(searchParams.toString());

// a=2&a=1&b=3&c=4

toString():返回搜索參數(shù)組成的字符串，可直接使用在URL上。

let url = new URL("https://example.com?foo=1&bar=2");
let params = new URLSearchParams(url.search.slice(1));

//Add a second foo parameter.
params.append("foo", 4);
console.log(params.toString());
//Prints "foo=1&bar=2&foo=4".

values():返回iterator 此對象包含了鍵/值對的所有值。

// 創(chuàng)建一個測試用URLSearchParams對象
let searchParams = new URLSearchParams("key1=value1&key2=value2");

// 輸出值
for(var value of searchParams.values()) {
  console.log(value);
}

上面就是針對其所有的接口方法進(jìn)行的一個梳理。然而，感覺好像和我們平時的關(guān)聯(lián)沒有很大呢？下面讓我們來看幾個具體的使用場景。

我們之前在獲取瀏覽器地址參數(shù)時很多時候是通過對地址進(jìn)行分割，然后拼接字段對象的方式來做的，類似

function GetRequest() {
  let url = location.search; //獲取url中"?"符后的字串
  let theRequest = new Object();
  if (url.indexOf("?") != -1) {
    let str = url.substr(1);
    strs = str.split("&");
    for (let i = 0; i < strs.length; i++) {
      theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
    }
  }
  return theRequest;
}

但是我們?nèi)绻褂?b>URLSearchParams時就不用這么繁瑣了

const params = new URLSearchParams(location.search)
params.get(key)

在我們使用axios和fetch來替換之前的ajax進(jìn)行數(shù)據(jù)請求時，我們會遇到數(shù)據(jù)格式不一致的問題。

axios({
    method: "post",
    url: "/test",
    data: {
        name: "li lei",
        age: 18
    }
})

上面的調(diào)用方法和我們使用ajax時非常相似，我們可能也會自然而然的這樣來寫，但是我們會發(fā)現(xiàn)，其默認(rèn)的數(shù)據(jù)格式是有差別的：

axios數(shù)據(jù)格式：

ajax數(shù)據(jù)格式：

是的，多了一層包裹，這樣和我們后端的對接就出現(xiàn)問題了。哪怕是手動去修改ContentType為application/x-www-form-urlencoded仍然沒有解決。

那么URLSearchParams能如何解決呢

let params = new URLSearchParams();
params.append("name", "li lei");
params.append("age", 18);

axios({
    method: "post",
    url: "/test",
    data: params
})

工具好用，但是不可避免的兼容性并沒有那么的理想。那我們該怎么辦呢？

工欲善其事，必先利其器

url-search-params-polyfill

這是一個專門為URLSearchParams制作的polyfill庫。具體的使用方法大家可以參照庫的相關(guān)說明。在這主要再強(qiáng)調(diào)一下，這個庫能夠解決瀏覽器的兼容性問題，但是在使用fetch進(jìn)行請求調(diào)用時，我們?nèi)匀恍枰謩尤ピO(shè)置ContentType的值。引用該庫中給到的一個實(shí)例

function myFetch(url, { headers = {}, body }) {
    headers = headers instanceof Headers ? headers : new Headers(headers);
    
    if (body instanceof URLSearchParams) {
        headers.set("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    }
    
    fetch(url, {
        headers,
        body
    });
}

通過我們對官方接口的說明以及實(shí)際場景的使用，詳細(xì)了解了URLSearchParams的主要功能和使用方法，希望能夠在我們以后的開發(fā)中起到幫助作用。

參考資料：
URLSearchParams API
使用URLSearchParams處理axios發(fā)送的數(shù)據(jù)

關(guān)注微信公眾號同步推送更新
或者可以去Github上面給個Star