处理url携带参数成对象数组

形如www.xxx?id=abc&name=xxxmm&uuid=ahg2223dfgh788vxzsr 该如何取到url携带的参数并且能方便的使用呢？

思路：

1.首先截取?后面的字符串，通过&符号分割成数组，此时数组的每一项都包含一个参数的key和value:

id=abc&name=xxxmm&uuid=ahg2223dfgh788vxzsr处理成["id=abc","name=xxxmm","uuid=ahg2223dfgh788vxzsr"]

var urlStr = location.search.substr(1)   //id=abc&name=xxxmm&uuid=ahg2223dfgh788vxzsr
var list = urlStr.split("&")   // ["id=abc","name=xxxmm","uuid=ahg2223dfgh788vxzsr"]

2.循环处理数组中的每一项，把参数字符串（如"id=abc"处理成{"id":'abc'}）:

"id=abc"处理成{"id":'abc'}中间需要几个步骤：

(1) 循环数组list把数组中的每一项处理成另一个数组（"id=abc"处理成["id","abc"]）

"id=abc"处理成["id","abc"]

for(var i=0;i<list.length;i++){
    var item = list[i].split("=")
    console.log(item);    // ["id", "abc"] 、["name", "xxxmm"]、["uuid", "ahg2223dfgh788vxzsr"]
}

(2) 定义一个obj变量保存对象，保存数组item中的第0项为key，第1项为value:

for(var i=0;i<list.length;i++){
   var item = list[i].split("=");
   console.log(item);    // ["id", "abc"] 、["name", "xxxmm"]、["uuid", "ahg2223dfgh788vxzsr"]
   var obj = {};
}

(3) 编写一个返回动态key、value的方法：

function returnObj(key, value){
 let keyValue = {};
 keyValue[key] = value;
 return keyValue;
}

如returnObj("name","李白") 返回 {"name":"李白"}

(4) 取出数组中的每一项item，循环调用returnObj(key,value)方法返回所有的对象：

for(var i=0;i<list.length;i++){
    var item = list[i].split("=")
    console.log(item);    // ["id", "abc"] 、["name", "xxxmm"]、["uuid", "ahg2223dfgh788vxzsr"]
    var obj = {};
    obj = returnObj(item[0],item[1]);
    console.log(obj) ;   // {"id": "abc"} 、{"name":"xxxmm"}、{"uuid": "ahg2223dfgh788vxzsr"}
}

(5) 如果需要可以把所有对象处理成数组id=abc&name=xxxmm&uuid=ahg2223dfgh788vxzsr最终转换成 [{"id": "abc"} ,{"name":"xxxmm"},{"uuid": "ahg2223dfgh788vxzsr"}]

完整代码：

var urlStr = location.search.substr(1)
var list = urlStr.split("&")
var objList = [];
for(var i=0;i<list.length;i++){
    var item = list[i].split("=");
    console.log(item);    // ["id", "abc"] 、["name", "xxxmm"]、["uuid", "ahg2223dfgh788vxzsr"]
    var obj = {};
    obj = returnObj(item[0],item[1]);
    console.log(obj) ;   // {"id": "abc"} 、{"name":"xxxmm"}、{"uuid": "ahg2223dfgh788vxzsr"}
    objList.push(obj);
    console.log(objList);   // [{"id": "abc"} ,{"name":"xxxmm"},{"uuid": "ahg2223dfgh788vxzsr"}]
}

// 返回对象方法
function returnObj(key, value){
  let keyValue = {};
  keyValue[key] = value;
  return keyValue;
}

PS:更简洁的方法：

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
}
// 直接调用方法：
urlParse()    // [{"id": "abc"} ,{"name":"xxxmm"},{"uuid": "ahg2223dfgh788vxzsr"}]

直接调用方法即可：urlParse() // [{"id": "abc"} ,{"name":"xxxmm"},{"uuid": "ahg2223dfgh788vxzsr"}]

最终id=abc&name=xxxmm&uuid=ahg2223dfgh788vxzsr会变成 [{"id": "abc"} ,{"name":"xxxmm"},{"uuid": "ahg2223dfgh788vxzsr"}]

参考 愿你如夏日清凉的风的文章：将url中的参数解析成对象

. END