如何做一道题深入面试官内心的coding题

很多求职者在面试完以后都感觉非常良好，认为自己对答如流，这个面试稳了。事实上，最后挂了，很大一部分原因是由于在coding环节写的不尽面试官意。

今天就通过一道很简单的面试题来学习一下，具体在面试的时候怎么样去分析题目，怎么去总结自己的coding思路，怎么完整的实现面试官的要求。

首先来看一下题目要求：

有这么一段字符串

txt 复制代码

https://www.juejin.cn?user=gs&user=gt&id=1&name=%E5%BC%A0%E4%B8%89

要求实现一个parseUrl函数，最后返回结果为

json 复制代码

{ user: [ 'gs', 'gt'], id: '1', name: '张三' }

不难看出，这道题目不就是提取url参数的吗？首先我们要做的就是把?前后的字符分割，最简单的方式就是用location.search方法

但是，这里考虑到不仅仅是在浏览器中打开，如果在node环境下，它就没有这个方法了，所以我们换个方式，用split方法:

js 复制代码

const url = 'https://www.juejin.cn?user=gs&user=gt&id=1&name=%E5%BC%A0%E4%B8%89'
const urlArr = url.split('?')
console.log(urlArr)

分割以后，得到一个数组

我们只需要数组的第二项就能拿到?后面的字符串了,然后我们在用split方法再次分割一下:

js 复制代码

const urlParams = urlArr[1].split('&')
console.log(urlParams)

得到一个数组，现在要做的就是遍历这个数组，以key和value的形式，存到一个对象中即可。

js 复制代码

function parseUlr(url) {
  const urlArr = url.split('?')[1];
  const paramsArr = urlArr.split('&');
  const result = {};
  paramsArr.forEach((item) => {
    let [key,value] = item.split("=");
    result[key] = value
  });
  return result
}

我们来测试一下：

js 复制代码

const url = 'https://www.juejin.cn?user=gs&user=gt&id=1&name=%E5%BC%A0%E4%B8%89'
console.log(parseUlr(url))

结果如下：我们来看看返回的这个对象，好像跟人家要求的结果不一样啊：

json 复制代码

{ user: [ 'gs', 'gt'], id: '1', name: '张三' }

如果你的代码实现到此为止，那么很遗憾，你的面试也G了。

我们继续往下看，题目给出的url是这样的，

js 复制代码

https://www.juejin.cn?user=gs&user=gt&id=1&name=%E5%BC%A0%E4%B8%89

user有两个，name被是转码之后的，解析出来是个张三啊。

我们继续改进一下代码。

首先来看看如何处理name,%E5%BC%A0%E4%B8%89是由encodeURIComponent方法编码后的一个字符串，

要想解码，就需要decodeUrlComponent方法

如果是在浏览器中，url参数有汉字，会被编码成上面那种字符串的形式。

然后再来分析，两个user参数如何处理的，可以看到题目给出的结果是处理成了一个数组。也就是说，如果超出了有相同的参数超出了一个，就会变成数组（当然在浏览器的url不会出现这种情况，考察只是逻辑）。

这里我们的解题思路是通过对象的key、value的形式，如果key的值不存在，直接给相应的key赋值即可，如果key已经有值了，那就说明下次再遇到相同的key，就应该添加到一个数组中。可是这时候key只是个字符串，想要变成一个数组，我们需要这样过写 $val1, val2$ ，如果下次再遇到相同的key，这时候key的值已经是个数组了，就需要进行push操作了。

下面重新改造一下代码：

diff 复制代码

function parseUlr(url) {
  const urlArr = url.split('?')[1];
  const paramsArr = urlArr.split('&');
  const result = {};
  paramsArr.forEach((item) => {
    let [key,value] = item.split("=");
    const decodeValue = decodeURIComponent(value);
+   if(result[key]) {
+      if (Array.isArray(result[key])) {
+        result[key].push(decodeValue);
      } else {
+        result[key] = [result[key], decodeValue];
      }
+    } else {
+      result[key] = decodeValue;
    }
  });
  return result
}

const url = 'https://www.juejin.cn?user=gs&user=gt&id=1&name=%E5%BC%A0%E4%B8%89'
console.log(parseUlr(url))

测试一下，结果跟题目给出的结果已经完全一致了。

到此，这道题才算是完整的答出来了。

最后，再次总结一下，虽然看着是一道简简单单的题目，但是坑很多，尤其是多个相同key处理和url编码处理，可能这就是面试官着重关注的coding点，你没有写出来，那毫无疑问，你的面试结果会大打折扣。

我是朽木白，欢迎大家点赞关注，学习面试小技巧。需要面试渡劫的可以添加我的地球号：xiumubai01，拉你一起渡劫。