URLSearchParams 物件
URLSearchParams 物件定義了用於構造或者解析 url 查詢字串的一系列方法。
之前,對 URL 查詢字串進行相關操作相對複雜,參閱獲取 url 傳遞 引數值 一章節。
一.建立 URLSearchParams 例項:
通過建構函式 URLSearchParams() 建立一個物件例項。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let urlSearchParam = new URLSearchParams(init);
引數解析:
(1).init:可選,有多種引數形式,目的就是構建查詢字串鍵值對。
[JavaScript] 純文字檢視 複製程式碼執行程式碼let str = "?mod=viewthread&tid=4596"; let urlSearchParam = new URLSearchParams(str); console.log(urlSearchParam.get("mod"));
程式碼執行效果截圖如下:
程式碼分析如下:
(1).建構函式的引數是一個URL 查詢字串。
(2).最前的問號(?)可以帶也可以不帶,但是問號左側的內容必須要去掉。
[JavaScript] 純文字檢視 複製程式碼執行程式碼let arr=[["a",1],["b",2]]; let urlSearchParam = new URLSearchParams(arr); console.log(urlSearchParam.get("a"));
程式碼執行效果截圖如下:
程式碼分析如下:
(1).建構函式的引數是一個陣列,陣列中的每一個元素是具有兩個元素的陣列。
(2).每一個成員陣列都被解析為查詢字串中的鍵值對。
(3).作為鍵的部分必須要加引號,否則會報錯,比如 [[a,1],[b,2]] 報錯。
[JavaScript] 純文字檢視 複製程式碼執行程式碼let obj={"a" : 1 , "b" : 2}; let urlSearchParam = new URLSearchParams(obj); console.log(urlSearchParam.get("a"));
程式碼執行效果截圖如下:
程式碼分析如下:
(1).建構函式引數可以是一個物件,物件的每一個鍵值對構成URL查詢字串的鍵值對。
(2).物件的鍵可以帶引號,也可以不帶,與上面的陣列不同。
二.程式碼例項:
URLSearchParams 物件是對URL查詢字串的操作。
通過for of可以獲取所有的查詢字串鍵值對,程式碼如下:
[JavaScript] 純文字檢視 複製程式碼執行程式碼let str = "?mod=viewthread&tid=4596"; let urlSearchParam = new URLSearchParams(str); for (let keyValue of urlSearchParam) { console.log(keyValue[0] + ":" + keyValue[1]); }
程式碼執行效果截圖如下:
每一個成員都儲存著 URL 查詢字串的鍵值對。
[JavaScript] 純文字檢視 複製程式碼let str = "?mod=viewthread&tid=4596"; let urlSearchParam = new URLSearchParams(str); fetch("https://www.softwhy.com/antApi", { method: "post", body: urlSearchParam }).then(function(){ // code })
可以直接當做表單資料傳送到伺服器進行相關處理。
URLSearchParams例項方法:
方法 | 描述 |
append() | 新增新的 key/value 到 URL 中。 |
delete() | 刪除所有匹配的 key/value 值,重複的 key 都被刪除。 |
entries() | 返回所有鍵值對 key/value。 |
forEach() | 遍歷 URL 查詢字串中的所有鍵值對。 |
get() | 返回與給定 key 匹配的第一個 value 值。 |
getAll() | 返回所有與給定 key 匹配 value 值。 |
has() | 查詢指定 key 是否存在,返回一個布林值。 |
keys() | 返回所有鍵 key。 |
set() | 設定 key 的 value 值。 |
toString() | 返回 URL 字串。 |
values() | 返回所有值。 |
相關文章
- URLSearchParams 物件用法物件
- URLSearchParams delete()delete
- URLSearchParams get()
- URLSearchParams getAll()
- URLSearchParams getAll() 方法
- URLSearchParams get() 方法
- URLSearchParams delete() 方法delete
- URLSearchParams append()APP
- URLSearchParams append() 方法APP
- 使用URLSearchParams處理 fetch 傳送的資料
- Vue&axios post請求使用URLSearchParams相容IE的解決辦法VueiOS
- session物件、cookie物件和appliaction物件Session物件CookieAPP
- Javascript 物件 – 字串物件JavaScript物件字串
- 函式物件、物件、原型函式物件原型
- 物件導向,搞定物件物件
- 物件獲取原型物件物件原型
- Javascript 物件 – 數學物件JavaScript物件
- Javascript 物件 – 陣列物件JavaScript物件陣列
- jQuery物件和DOM物件jQuery物件
- 值物件與引用物件物件
- JavaScript 本地物件、內建物件和宿主物件JavaScript物件
- Golang中多大的物件算是大物件,多小的物件算是小物件?Golang物件
- JavaScript課程——Day07(物件簡介、Math物件、時間物件、字串物件)JavaScript物件字串
- js,javascript陣列物件的父級物件 – 子集物件(陣列物件相減)JSJavaScript陣列物件
- JavaScript 複習之包裝物件,Boolean物件,Number物件JavaScript物件Boolean
- 偽物件、樁物件、模擬物件|單元測試物件
- JS筆記—— 物件 (原型物件)JS筆記物件原型
- 事務物件和命令物件物件
- 物件鎖:傳遞物件鎖物件
- ejb主物件,物件,例項 ?物件
- 引用物件與例項物件物件
- Django:F物件和Q物件Django物件
- js 原生獲取 url地址引數 const query = new URLSearchParams(window.location.search); const added = query.get("added")JS
- 物件物件
- 內建物件、宿主物件和本地物件是什麼物件
- JavaScript物件與建立物件的方式JavaScript物件
- Js物件導向(1): 理解物件JS物件
- jquery物件如何轉化成DOM物件jQuery物件