js笔试✏️ [1] URL查询参数

「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」

请听题

解析此URLhttp://www.domain.com/?user=rose&id=123&id=456&city=%E5%8C%97%E4%BA%AC%E5%B8%82&enabled。将其转为对应的json。

{
    user:'rose',
    id:[123,456],
    city:'北京市',
    enabled:true
}

说明：

1. id出现两次，将其组成为数组。
2. city被编码了，我们需要解码
3. enabled没有参数将其值设为true

获取当前URL的方法

当然对于我们这道给了URL不需要这些。可以作为了解

url = window.location.href; /* 获取完整URL */
alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */
 
url = window.location.pathname; /* 获取文件路径（文件地址） */
alert(url); /* /Test/index.html */

url = window.location.protocol; /* 获取协议 */
alert(url); /* http */
 
url = window.location.host; /* 获取主机地址和端口号 */
alert(url); /* http://127.0.0.1:8020/ */
 
url = window.location.hostname; /* 获取主机地址 */
alert(url); /* http://127.0.0.1/ */
 
url = window.location.port; /* 获取端口号 */
alert(url); /* 8020 */
 
url = window.location.hash; /* 获取锚点（“#”后面的分段） */
alert(url); /* #test?name=test */
 
url = window.location.search; /* 获取属性（“?”后面的分段） */
alert(url);

拆分出参数

url.split之后得到是按照'?'拆分的数组

let url = 'http://www.domain.com/?user=rose&id=123&id=456&city=%E5%8C%97%E4%BA%AC%E5%B8%82&enabled'
function getJson(){
	let urlParam =url.split('?')[1]
	return urlParam
}
let a = getJson()
console.log(a)

将参数分开

function getJson(){
	let urlParam =url.split('?')[1]
	let array = urlParam.split('&')
	return array
}
// 结果如下
['user=rose', 'id=123', 'id=456', 'city=%E5%8C%97%E4%BA%AC%E5%B8%82', 'enabled']

处理数组

function getJson(){
		let urlParam =url.split('?')[1]
		let array = urlParam.split('&')
		return array.reduce((accu,str)=>{
			if(str.includes('=')){
                                // 数组解构
				let [key,value] = str.split('=')
				// 中文解码
				value = decodeURIComponent(value)
					// 正则转为数字 为什么要使用正则？因为是在字符串中校验是否有数字
					value = /^\d+$/.test(value) ? +value : value
				// 如果这个键出现过
				if(accu.hasOwnProperty(key)){
					// 把其转为一个数组
					accu[key] = [].concat(accu[key],value)
				}else{
					accu[key] = value
				}
			}else{
				accu[str] = true
			}
			return accu
		},{})
	}

reduce

arr.reduce(function(prev,cur,index,arr){\
...\
}, init);

• arr 表示原数组；\
• prev 表示上一次调用回调时的返回值，或者初始值 init;\
• cur 表示当前正在处理的数组元素；\
• index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；\
• init 表示初始值 详细说明：www.cnblogs.com/amujoe/p/11…

hasOwnProperty

用于检测一个属性是否是对象的自有属性

concat

合并两个/多个数组，方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。 此处就是合并了多个数组