前言

作为一名professional前端开发攻城狮，那理应对地址栏传参了如指掌。今天封装一个获取url中携带的get参数的函数，一起来看下吧~

一、需求

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'

书写一个函数，将url地址中的GET参数(参数名和参数个数不确定)，将每一个参数按照key-value的形式放入一个对象中。如下格式：

{a: "1", b: "2", c: "", d: "xxx", e: undefined}

二、代码演示

1. 方案一

代码如下（示例）：

function serilizeUrl(url) {
  let urlObj = {}  
  if (/\?/.test(url)) {
    let urlStr = url.substring(url.indexOf('?') + 1)
    let urlArr = urlStr.split('&')
    let len = urlArr.length
    
    for (let i = 0; i < len; i++) {
      let urlItem = urlArr[i]
      let item = urlItem.split('=')
      urlObj[item[0]] = item[1]
    }
    
    return urlObj
  }
  return nulls
}

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'

const result = serilizeUrl(url)
console.log(result)

2. 方案二

使用js内置对象Array的reduce方法 代码如下（示例）：

function serilizeUrl(url) {
  if (/\?/.test(url)) {
    let urlStr = url.substring(url.indexOf('?') + 1)
    let urlArr = urlStr.split('&')

    return urlArr.reduce((acc, cur) => {
      let item = cur.split('=')
      acc[item[0]] = item[1]
      return acc
    }, {})
  }
}

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'

const result = serilizeUrl(url)
console.log(result)

三、 结果演示

总结

Life is like a bar of chocolate