欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

URLSearchParams快速解析URL查詢參數(shù)實現(xiàn)

 更新時間：2023年06月13日 11:41:57   作者：天問  
這篇文章主要為大家介紹了URLSearchParams快速解析URL查詢參數(shù)實現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、URLSearchParams 構(gòu)造函數(shù)

瀏覽器 Window 內(nèi)置的 URLSearchParams 接口定義了一些實用的方法來處理 URL 的查詢字符串，再也不用 & 字符串分割的方式去解析 url query 參數(shù)了。

JS && URLSearchParams

URLSearchParams() 構(gòu)造器創(chuàng)建并返回一個新的 URLSearchParams 對象。開頭的 ? 字符會被忽略。

let oUSP = URLSearchParams()
console.log(oUSP)
/*
URLSearchParams {}
  [[Prototype]]: URLSearchParams
    append: ? append()
    delete: ? delete()
    entries: ? entries()
    forEach: ? forEach()
    get: ? ()
    getAll: ? getAll()
    has: ? has()
    keys: ? keys()
    set: ? ()
    sort: ? sort()
    toString: ? toString()
    values: ? values()
    constructor: ? URLSearchParams()
    Symbol(Symbol.iterator): ? entries()
    Symbol(Symbol.toStringTag): "URLSearchParams"
    [[Prototype]]: Object
* */

二、URLSearchParams 方法

該接口不繼承任何屬性。

  • append：插入一個指定的鍵/值對作為新的搜索參數(shù)。
  • delete：從搜索參數(shù)列表里刪除指定的搜索參數(shù)及其對應(yīng)的值。
  • set：設(shè)置一個搜索參數(shù)的新值，假如原來有多個值將刪除其他所有的值。
  • keys：返回iterator 此對象包含了鍵/值對的所有鍵名。
  • values：返回iterator 此對象包含了鍵/值對的所有值。
  • entries：返回一個iterator可以遍歷所有鍵/值對的對象。
  • forEach：插入一個指定的鍵。
  • get：獲取指定搜索參數(shù)的第一個值。
  • getAll：獲取指定搜索參數(shù)的所有值，返回是一個數(shù)組。
  • has：返回 Boolean 判斷是否存在此搜索參數(shù)。
  • sort：按鍵名排序。
  • toString：返回搜索參數(shù)組成的字符串，可直接使用在 URL 上。

三、使用示例

let { search } = new URL('https://tiven.cn?id=12&dt=2022-10-10&sort=desc')
console.log(search) // ?id=12&dt=2022-10-10&sort=desc
// 創(chuàng)建 URLSearchParams 對象
let p1 = new URLSearchParams(search);
let p2 = new URLSearchParams([["id", 12], ["dt", '2022-10-10'], ["sort", 'desc']]);
let p3 = new URLSearchParams({"id": 12 , "dt": '2022-10-10', "sort": 'desc'});
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc
console.log(p2.toString()) // id=12&dt=2022-10-10&sort=desc
console.log(p3.toString()) // id=12&dt=2022-10-10&sort=desc
// entries
for (let [k, v] of p1.entries()) {
  console.log(k, v)
}
// forEach
p1.forEach((v,k)=>{
  console.log(k, v)
})
// has 判斷是否包含某個查詢參數(shù)
console.log(p1.has('id')) // true
console.log(p1.has('name')) // false
// get 獲取某個參數(shù)值
console.log(p1.get('id')) // 12
console.log(p1.get('age')) // null
// append 添加鍵值對
p1.append('name', 'Tiven')
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc&name=Tiven
// delete 刪除鍵值對
p1.delete('name')
console.log(p1.toString()) // id=12&dt=2022-10-10&sort=desc
// sort 排序
p1.sort()
console.log(p1.toString()) // dt=2022-10-10&id=12&sort=desc

注意： URLSearchParams 構(gòu)造函數(shù)不會解析完整 URL，但是如果字符串起始位置有 ? 的話會被去除。

let p = new URLSearchParams('https:tiven.cn?id=12&name=Tiven')
console.log(p.has('id'))  // false
console.log(p.get('id'))  // null
console.log(p.toString()) // https%3Ativen.cn%3Fid=12&name=Tiven

以上就是URLSearchParams快速解析URL查詢參數(shù)實現(xiàn)的詳細內(nèi)容，更多關(guān)于URLSearchParams解析URL的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • js微信掃描二維碼登錄網(wǎng)站技術(shù)原理

    js微信掃描二維碼登錄網(wǎng)站技術(shù)原理

    這篇文章主要介紹了js微信掃描二維碼登錄網(wǎng)站技術(shù)原理,具有一定的參考價值，有需要的可以了解一下。
    2016-12-12
  • Javascript promise異步編程淺析

    Javascript promise異步編程淺析

    這篇文章主要介紹了Javascript promise異步編程，Promise 是異步編程的一種解決方案，可以替代傳統(tǒng)的解決方案–回調(diào)函數(shù)和事件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧
    2023-04-04
  • 微信小程序?qū)崿F(xiàn)流程進度的圖樣式功能

    微信小程序?qū)崿F(xiàn)流程進度的圖樣式功能

    最近正在做微信小程序，需要實現(xiàn)一個流程進度的圖樣式，下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進度的圖樣式功能實例代碼，需要的朋友參考下吧
    2018-01-01
  • 超實用的全新JavaScript事件Scrollend實例詳解

    超實用的全新JavaScript事件Scrollend實例詳解

    這篇文章主要為大家介紹了超實用的全新JavaScript事件Scrollend實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-01-01
  • JS 仿支付寶input文本輸入框放大組件的實例

    JS 仿支付寶input文本輸入框放大組件的實例

    下面小編就為大家?guī)硪黄狫S 仿支付寶input文本輸入框放大組件的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-11

    • 最新評論