【前端笔试题一】：解析url路径中的query参数

前言

本文记录下在笔试过程中的前端笔试编程题目，会持续更新

1. 题目：

解析 url 路径中的 query 参数，比如：‘http://building/#/skeleton?serialNumber=2023020818332821073&jobNo=210347&target=%7B%22a%22%3A%22b%22%2C%22c%22%3A%22d%22%7D&flag=tudoFlag’

需要将其转换成的格式如下：

{
    
    
	serialNumber: "2023020818332821073",
	jobNo: "210347",
	target: {
    
    
		a: "b",
		c: "d"
	}
}

2. 思路

对于 url，我们需要考虑的是：URL 是笔试时题目中给定的，还是需要我们自己获取？

如果是题目中给定的，我们直接拿来用即可，

如果题目中没给，我们则需要使用 window.location.search 进行获取，

其次，query 参数 指的是 URL 中 ? 后面的部分，且格式为： “key=value” ，所以需要对 URL 进行分割

然后再次以 & 进行分割，返回的是一个数组，数组每一项，= 前面的是值，后面的是键。

对该数组进行遍历，对每一个元素以 = 进行分割。

注意： URL中很多内容会出现 % 这样的内容，这实际上是对参数进行了URI编码 。

对于这类的编码参数如何处理？自然是需要进行解码：decodeURIComponent，并且需要 JSON.parse()

区别是否是 URI编码的特征就是：是否包含 %

3. 代码

const url = 'http://building/#/skeleton?serialNumber=2023020818332821073&jobNo=210347&target=%7B%22a%22%3A%22b%22%2C%22c%22%3A%22d%22%7D&flag=tudoFlag'

const getQueryString = (url) => {
    
    
	let obj = {
    
    }
	let arr = url.split('?')[1]
	let newArr = arr.split('&')
	newArr.forEach((item) => {
    
    
		let key = item.split('=')[0]
		let value = item.split('=')[1]
		if(value.indexOf('%') == -1) {
    
    
			// 不存在 % ,
			obj[key] = value
		} else {
    
    
			// 存在，需要进行解码
			obj[key] = JSON.parse(decodeURIComponent(value))
		}
	})
	return obj
}

console.log(getQueryString(url))

效果如下所示：