URLSearchParams 小記

URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串。之前沒有沒有接觸過，瞭解之後發現還是挺實用的，記錄一下。

首先，我們調用 new URLSearchParams() 會返回一個 URLSearchParams 對象實例：

let str = 'name=Amy&age=24&sex=female';
let obj = new URLSearchParams(str);

一個實現了 URLSearchParams 的對象可以直接用在 for...of 結構中，例如下面兩行是相等的：

for (const [key, value] of obj) {}
for (const [key, value] of obj.entries()) {}

通過這個實例可以調用以下方法：

1、append(name, value):插入一個指定的鍵/值對作爲新的搜索參數。
其中 name 是需要插入搜索參數的鍵名，value 是需要插入搜索參數的對應值。

obj.append('address', 'ShenZhen');
obj.toString();  //"name=Amy&age=24&sex=female&address=ShenZhen"

2、delete(name):從搜索參數列表裏刪除指定的搜索參數及其對應的值。
name 是需要刪除的鍵值名稱。

obj.delete('address');
obj.toString();  //"name=Amy&age=24&sex=female"

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

for(let p of obj.entries()) {
    console.log(p[0]+': '+p[1]);
}
//name: Amy
//age: 24
//sex: female

4、get(name):獲取指定搜索參數的第一個值。
name 是將要返回的參數的鍵名。返回一個USVString；如果沒有，則返回null。

obj.get('name');  //"Amy"
obj.get('address');  //null

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

obj.getAll('name');  //["Amy"]
obj.getAll('address');  //[]

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

obj.has('name');  //true
obj.has('address');  //false

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

for(let p of obj.keys()) {
    console.log(p);
}
//name
//age
//sex

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

obj.set('address', 'ShenZhen');
obj.toString();  //"name=Amy&age=24&sex=female&address=ShenZhen"

9、sort(): 按鍵名排序。

obj.sort();
obj.toString();  //"address=ShenZhen&age=24&name=Amy&sex=female"

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

for(let p of obj.values()) {
    console.log(p);
}
//ShenZhen
//24
//Amy
//female

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

附：

使用URLSearchParams處理axios發送的數據：https://www.cnblogs.com/coolle/p/7027950.html

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.