形如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
