【前端面试系列】如何搞定纸上代码环节(1)，阿里前端二面是什么

按照规范，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年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

nvert/b871b45fb2e6d5442144c863cbcff965.png)

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-3hYQMhOJ-1712729505482)]