【前端笔试题一】：解析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))

效果如下所示：