js解析url三種方法

js解析url，就是將如下url
const url = 'https://www.baidu.com/m?f=8&ie=utf-8&rsv_bp=1&tn=monline_3_dg&wd=session'
解析爲

法一： 利用splice分割+循環依次取出
先看代碼

function queryURLparams(url) {
    let obj = {}
    if (url.indexOf('?') < 0) return obj
    let arr = url.split('?')
    url = arr[1]
    let array = url.split('&')
    for (let i = 0; i < array.length; i++) {
        let arr2 = array[i]
        let arr3 = arr2.split('=')
        obj[arr3[0]] = arr3[1]
    }
    return obj

}
console.log(queryURLparams(url));

要點分析

• 將url解析出來，要存放在一個新的對象中，所以要初始化一個空的對象let obj = {}
• 首先判斷url後面是否有？傳參,如果沒有?傳參，直接返回空對象
  if (url.indexOf('?') < 0) return obj
• 用？ 進行參數分割 let arr = url.split('?')
  此時的效果是將? 前後，一分爲二
  
• 一分爲二之後，第二部分纔是我們要的參數，所以先將第二部分取出來
  url = arr[1]
  效果圖
  
• 通過觀察 ，下一步就是用 & 進行分割
  let array = url.split('&')
  效果圖
  
• 現在是數組字符串，要將數組字符串，拆成對象鍵值對的形式， 通過循環

for (let i = 0 ;i < array.length; i++) {
let arr2 = array[i] // 將數組中的每一個字符串都取出來，賦值給arr
let arr3 = arr2.splice('=') //對每一個字符串，用= 進行分割 形如'f=8'，現在分割爲 'f,8',下一步就是組合成鍵值對的形式
obj[arr3[0]] = arr3[1]
}

• 返回url解析好的對象 return obj
• 調用函數，輸出結果 console.log(queryURLparams(url))
  法二: 正則+arguments
  代碼

function queryURLparamsRegEs5(url) {
    let obj = {}
    let reg = /([^?=&]+)=([^?=&]+)/g
    url.replace(reg, function() {
        obj[arguments[1]] = arguments[2]
    })
    return obj

}

要點分析

• 正則匹配規則 /([^?=&]+)=([^?=&]+)/g
• 利用replace替換
• 用僞數組進行鍵值對拼接

法三: 正則+ ..arg

function queryURLparamsRegEs6(url) {
    let obj = {}
    let reg = /([^?=&]+)=([^?=&]+)/g
    url.replace(reg, (...arg) => {
        obj[arg[1]] = arg[2]
    })
    return obj

}

要點分析

• 就是用es6的 …arg
• 其實和arguments差不多 ，就是arguments是僞數組，…arg是真數組