【前端面试系列】如何搞定纸上代码环节？(2)

表层问题

表层问题主要指代码可读性，评价标准是：是否看起来简洁？是否看一眼就能理解它在做什么？上面的结果有哪些具体的表层问题呢？新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

可读性方面，如果你想在循环体里面要追踪解析到的键值对，需要在大脑中保持映射 key = tmp[0], value = tmp[1]；

变量命名方面，比如 tmp 的多次使用，ary 代称数组虽然也可以，社区中用 arr 比较多，变量命名多用约定俗成的会更好；

做了表层改进的参考代码如下：

1. function parse(str) {

2. var paramObj = {};

3. var paramArr = str.split(‘&’);

4. for (var i = 0; i < paramArr.length; i++) {

5. var tmp = paramArr[i].split(‘=’);

6. // 把 key 和 value 单独拆开来，会清晰很多

7. var key = tmp[0];

8. var value = tmp[1] || true;

9. if (!paramObj[key]) {

10. paramObj[key] = value;

11. } else {

12. var newValue = [paramObj[key], value];

13. paramObj[key] = newValue;

14. }

15. }

17. return paramObj;

18. }

逻辑问题

逻辑不严谨的代码在不同输入情况下的结果是不稳定的，具体表现为：

obj[tmp[0]] 不能正确判断结果中是否已经存在某个 key，因为可能出现值为 0 的情况；

上面的代码不能正确处理重复出现 2 次以上的 key，部分候选人到面试结束还没想明白为啥；

按照规范，URL 中的的各种参数需要在 encode 之后拼接到 URL 中，对应的解析时需要 decode；

解决掉逻辑问题的参考代码如下：

1. function parse(str) {

2. var paramObj = {};

3. var paramArr = decoeURI(str).split(‘&’);  // 先解码

4. for (var i = 0; i < paramArr.length; i++) {

5. var tmp = paramArr[i].split(‘=’);

6. var key = tmp[0];

7. var value = tmp[1] || true;

8. if (typeof paramObj[key] === ‘undefined’) { // 判断 key 是否存在

9. paramObj[key] = value;

10. } else {

11. var newValue = Array.isArray(paramObj[key]) ? paramObj[key] : [paramObj[key]];  // 正确处理数组

12. newValue.push(value);

13. paramObj[key] = newValue;

14. }

15. }

17. return paramObj;

18. }

健壮问题

整段代码没有做任何的防御性编程，会让它很容报错，哪些地方该做防御性编程是值得拿捏的问题。QueryString 解析函数至少要要求自己的参数是字符串吧？在函数开头增加如下代码会更好：

1. //…

2. if (typeof str !== ‘string’) {

3. return {};

4. }

5. //…

需求问题

代码中没有对数字做任何处理，拿到问题就埋头写代码的候选人几乎都有这个问题，这个问题的考点是怎么把能转换成数字的值转成数字。你想好怎么做了么？用 parseInt？还是用 parseFloat？

下面是能正确处理数字的参考代码：

1. function parse(str) {

2. if (typeof str !== ‘string’) {

3. return {};

4. }

6. var paramObj = {};

7. var paramArr = decodeURI(str).split(‘&’);

8. for (var i = 0; i < paramArr.length; i++) {

9. var tmp = paramArr[i].split(‘=’);

10. var key = tmp[0];

11. var value = tmp[1] || true;

13. // 处理数字：很多人忽略这里的类型判断，布尔值传给 Number 也会解析出数字

14. if (typeof value === ‘string’ && isNaN(Number(value)) === false) {

15. value = Number(value);

16. }

18. if (typeof paramObj[key] === ‘undefined’) {

19. paramObj[key] = value;

20. } else {

21. var newValue = Array.isArray(paramObj[key]) ? paramObj[key] : [paramObj[key]];

22. newValue.push(value);

23. paramObj[key] = newValue;

24. }

25. }

27. return paramObj;

28. }

不算问题的问题

下面两点不算是问题，但是如果候选人能做到，无疑是加分项。

在 ES6 成为新语言标准的情形下，候选人还在大量的使用 var，虽然并没有错，但是你要有没有更好的方法；

可以用更语义化的 JS 数组方法来组织代码，比如 map、reduce，如果你知道的化，在面试中可以大胆使用；

使用 ES6 编写的参考代码如下：

1. function parse(str) {

2. if (typeof str !== ‘string’) {

3. return {};

4. }

6. return decodeURI(str).split(‘&’).map(param => {

7. const tmp = param.split(‘=’);

8. const key = tmp[0];

9. let value = tmp[1] || true;

10. if (typeof value === ‘string’ && isNaN(Number(value)) === false) {

11. value = Number(value);

12. }

14. return { key, value };

15. }).reduce((params, item) => {

16. const { key, value } = item;

17. if (typeof params[key] === ‘undefined’) {

18. params[key] = value;

19. } else {

20. params[key] = Array.isArray(params[key]) ? params[key] : [params[key]];

21. params[key].push(value);

22. }

24. return params;

25. }, {});

26. }

此外，关注前端技术进展的同学可能会注意到部分现代浏览器提供了 URLSearchParams 的支持，可以用这个特性 1 行代码就搞定需求。

3. 编码结束后

代码初版写完之后，不要着急马上展示给面试官，就像是需求开发完，你至少得自己先按需求文档走一遍，把代码原题中的输入代进自己的代码做推演和简单的边界测试，然后再对着代码和面试官讲解。不出意外的话，推演过程你自己会发现部分问题，或者明显的改进点，这些内容你都可以跟面试官提出来，因为这也是展示你的能力的机会。

总结

感谢你花时间读到这里，相信你已经理解了通过纸上代码的过程和结果可以深入考察候选人的基本素质、工作方式、出活能力，也知道了在解答代码题的不同环节该注意哪些要点：动手前搞清楚问题；编码时注意编码风格、逻辑严谨性、程序健壮性；编码后要先自己测试和推演。当然，如果你之前没注意到这些，需要接下来工作中多加练习。最后祝你能找到你想要的工作。

[

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
链图片转存中…(img-rbbGjCNq-1715045434908)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！