面试：解析 url 中的 queryString

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

本道算法面试题可以说是和我们工作中很常见的一种场景：有时候请求参数是放在接口的 query 中，当前端拿到这个链接的后，如果需要获取参数中的数据，就需要前端解析这个 API ，然后获取参数并获取值。

题目：解析 url 中的 queryString

输入场景：

url 如下，其中包含若干个参数，而且接口还是被编码过的

url = https://www.baidu.com?name=coder&age=20&callback=https%3A%2F%2Fbaidu.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D

期望输出：

获取到所有的 query 参数，组成一个对象。

 {
     name: "coder",
     age: "20",
     callback: "https://baidu.com?name=test",
     list: ["a"],
     json: {
           str: 'abc',
           num: 123
     }
 }

解题分析

1. url 是被编码过的，所以首先要对 url 进行解密：使用 decodeURIComponent()

参考： 【 decodeURIComponent() 】

2. 使用 & 对字符串进行分割，得到数组

3. 去掉数组第一个值 ? 前的字符

4. 遍历数组获取对应的 key 和 value

   • 数组类型的参数，需要判断特殊处理
   • 对象类型的参数，也需要特殊处理

解题

完整代码如下：

function queryString(url) {
    // 解码 URL
    const decodeUrl = decodeURIComponent(url);
    // 分割 URL
    let paramArrays = decodeUrl.split('&');
    // 去除第一个值中的域名
    paramArrays[0] = paramArrays[0].split('?');
    paramArrays[0].shift();
    paramArrays[0] = paramArrays[0].join('?');

    console.log('paramArrays: ', paramArrays)
    // 定义一个空对象接收 key 和 value
    const obj = {}
    paramArrays.forEach(ele => {
        const itemArr = ele.split('=');
        let key = itemArr[0]
        let val = itemArr[1];
        let arr = [];
        if(key.includes('[]')){
            key = key.replace('[]', '');
            arr.push(val);
            val = arr;
        } else if (val.indexOf('{') === 0) {
            val = JSON.parse(val)
        }
        obj[key] = val;
    })
    console.log(obj)
}

// 执行结果
console.log(queryString('https://www.baidu.com?name=coder&age=20&callback=https%3A%2F%2Fbaidu.com%3Fname%3Dtest&list[]=a&json=%7B%22str%22%3A%22abc%22,%22num%22%3A123%7D'))

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。