少侠，快收下这份获取URL参数的秘籍

猥琐大叔提出问题

　　今天刚上班在摸鱼中，一位猥琐大叔抛了一个问题给我

　　对于一个资深划水工程师来说，本应该直接say no。可是这一次我忍住了，为了保住自己的地位，我马上打出一套降龙十八掌。

function getQueryVariable(variable) {
   const query = window.location.search.substring(1);
   const vars = query.split("&");
   for (let i=0; len = vars.length; i < len; i++) {
         let pair = vars[i].split("=");
         if(pair[0] == variable){
           return pair[1];
         }
   }
   return(false);
}

function getQueryVariable(variable) { 
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r != null) return unescape(r[2]); 
    return null; 
}

function getAllVariable() {  
  let url = location.search
  let obj = {}
  if (url.indexOf("?") != -1) {  
     let str = url.substr(1)
     strs = str.split("&")
     for(let i = 0, len = strs.length; i < len; i ++) {  
        obj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);  
     }  
  }  
  return obj
}

　　这一套下来，想必什么问题都解决了。可是这厮又来了一个问题，上面3个方法都是用了location.search，是否不用这个方法来完成的方法呢？

location.search获取参数为空？

　　此人在公司人称杠仙，经过一番拷问才说出原委。原来在开发过程中经过一番测试，发现location.search在获取参数时，有可能会出现为空的情况。

　　例如当url = 'https://coder.com?first=1&second=2&third=3'时，是可以实现正常获取。可是当url是hash模式的时候一切就不一样了，url = 'https://coder.com/#/?first=1&second=2&third=3'，这个时候无法获取到first=1&second=2&third=3因为在hash模式下，first=1&second=2&third=3是属于#/?first=1&second=2&third=3'，这个时候无法获取后面的参数了。

　　也就是说location.search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。那么是否又要通过一些复杂的正则来判断呢？其实不然，接下来有请火云邪神。

new URLSearchParams ()

这位兄弟可以快速的生成或者解析url，让我们看看用法。

    let url = 'https://test.com/?first=1&second=2';
    let params = url.split('?')[1];
    let parseUrlParams = new URLSearchParams(temp)
    console.log(parseUrlParams.get('first')); // 1
    console.log(parseUrlParams.get('second'));// 2
    console.log(params); // first=1&second=2

想要哪个就拿哪个，是不是很方便呢。

URLSearchParams.entries()

　　当然也可以帮所有的参数都放进一个{}来返回。先了解一下这个函数的这个方法URLSearchParams.entries()，它返回一个iterator可以遍历所有键/值对的对象。

parseUrlParams.entries('first=1&second=2') 
//URLSearchParams Iterator { [ 'first', '1' ], [ 'second', '2' ] }/

Object.fromEntries()

这是MDN上的方法介绍：Object.fromEntries() 方法把键值对列表转换为一个对象。那我们便将刚才entries方法返回的键值对直接转换成对象，看代码。

    function getAllVariable(urlParams) {
        let parseUrlParams = new URLSearchParams(urlParams)
        return Object.fromEntries(parseUrlParams.entries(urlParams))
    }
    getAllVariable('first=1&second=2') // {first: 1, second: 2}

我们再测试一下hash模式下的url呢。

    let url = 'http://test/#/home?first=1&second=2';
    let urlParams = url.split('?')[1];
    let paramsObj = getAllVariable(urlParams)
    console.log(paramsObj.first); // 1
    console.log(paramsObj.second);// 2

也是完美避过了location.search为空的问题了。让我们看看还有还有什么开发中便捷的使用方法呢。比如toString，set之类的，看下面补充~

方法汇总

URLSearchParams.append(key, value)：插入一个指定的键/值对作为新的搜索参数。需要传入指定获取的参数名称
URLSearchParams.delete()：从搜索参数列表里删除指定的搜索参数及其对应的值
URLSearchParams.getAll(key)：获取指定搜索参数的所有值，返回是一个数组。
URLSearchParams.has(key)：返回一个布尔值（true or false）判断是否存在此搜索参数。
URLSearchParams.keys()：返回iterator 此对象包含了键/值对的所有键名。
URLSearchParams.set(key, value)：设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。这样在url上拼接参数时直接进行调用就可以了。
URLSearchParams.toString()：返回搜索参数组成的字符串，可直接使用在URL上。
URLSearchParams.sort()：按键名排序。
URLSearchParams.values()：返回iterator 此对象包含了键/值对的所有值。

好了，最后上图看下兼容性。

IE老大哥还是一如既往的拖后腿~