- 提取参数部分,?前的和#后的都去掉
- &分割,提取参数名和参数值
- 赋值给对象(需注意相同参数名参数值需以数组形式存储)
let url = "http://example.com/?foo=bar&baz=qux&baz=quux&corge=#xxx"
let params = getParams(url)
console.log(params)
function getParams(url) {
//1.提取参数部分
let newUrl = url.split("?")[1].split("#")[0] //foo=bar&baz=qux&baz=quux&corge=
let obj = {}
if (newUrl) {
newUrl = newUrl.split("&") // ['foo=bar', 'baz=qux', 'baz=quux', 'corge=']
//forEach写法
newUrl.forEach((e) => {
//2.解构赋值,参数名和参数值解构为对象的键、值
const [key, value] = e.split("=")
if (obj[key]) {
//已经存在属性名(URL参数)
if (Array.isArray(obj[key])) {//需要判断,否则调用push方法会报错
obj[key].push(value) //属性值已经是数组形式,直接push属性值
} else {
obj[key] = [obj[key], value] //只有一个属性值,仍是字符串形式,先转成数组,此时变成包含两个元素的数组
}
} else {
obj[key] = value || ""
}
})
//for 循环写法
// for (var i = 0; i < newUrl.length; i++) {
// let arr = newUrl[i].split("=")
// console.log(arr)
// let key = arr[0]
// let value = arr[1]
// if (obj[key]) {
// if (Array.isArray(obj[key])) {
// console.log(obj[key])
// obj[key].push(value)
// } else {
// obj[key] = [obj[key], value]
// }
// } else {
// obj[key] = value
// }
// }
}
return obj
}
params[key] = [params[key], value]
将一个键值对中的值转换为一个数组,如果这个键已经存在,则将新的值添加到这个数组中。且体来说,假设params对象中已经存在一人键为kev的键值对,其值为value1,那么执行params[key=[params[key], value2]后,params对象中键为key的键值对的值将变为value1,value21,即一人包含两个元素的数组。如果params对象中不存在键为key的键值对,则会创建一个新的键值对,其键为key,值为[value],即一个包含一个元素的数组。
结果:
http://example.com/?foo=bar&baz=qux&baz=quux&corge=#xxx