将url中的参数解析成对象

开发过程中，常常会遇到需要根据url中的参数来做一些判断，我这里就分享一个提取url中的参数的工具类方法，简洁明了，方便使用。
一般工具类的方法都会放在util.js中，下面就是我们的JS代码：

/**
 * 解析url参数
 * @example ?id=12345&a=b
 * @return Object {id:12345, a:b}
 * */
export function urlParse() {
  let url = window.location.search
  let obj = {}
  let reg = /[?&][^?&]+=[^?&]+/g
  let arr = url.match(reg)
  // ['?id=12345','&a=b']
  if (arr) {
    arr.forEach((item) => {
      let tempArr = item.substr(1).split('=')
      let key = decodeURIComponent(tempArr[0])
      let val = decodeURIComponent(tempArr[1])
      obj[key] = val
    })
  }
  return obj
}

使用的时候像下面这样：

// 先引入
import { urlParse } from './common/js/util'
// 在需要的地方直接调用
urlParse()

这里简单解释一下这个正则表达式/[?&][^?&]+=[?&]+/g
第一个[]表示以?或&开头，就匹配?id=12345&a=b这个例子中第一个?号，第二个[]表示非?&，就匹配到了i或者d，第二个[]后面的+号表示多个，=号就直接匹配例子中的=号，最后这个[]跟第二个[]是一样的，+号也是一样的作用，/g就是全局匹配，意思就是匹配多组参数。
最终的结果就像下面这样：

{id: "12345", a: "b"}

再解释一下decodeURIComponent()这个方法：
它的作用是把字符串作为URI 组件进行编码，其返回值URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。

注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。

例子：

输出结果：

测试一：%E4%BD%A0%E5%A5%BD%EF%BC%8C%E4%B8%96%E7%95%8C%EF%BC%81
测试二：Hello%20world!
测试三：%2C%2F%3F%3A%40%26%3D%2B%24%23

再举一个我们这里的例子，如果我们的url参数是这个样子的：

?id=12345&a=b&a%20aa=b%20b%2Cb

解析之后就会变成下面这样：

{id: "12345", a: "b", a aa: "b b,b"}

%20就是空格，%2C就是英文逗号。

这里只输出这一个方法的写法，如果你的util.js文件中有很多方法，可以像下面这样写：

const urlParse = function () {
    // 重复的代码
}
module.exports = {
  urlParse
}

使用方式跟上面一样。