2024年最全【前端面试系列】如何搞定纸上代码环节？(1)，前端阿里面试题

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

可读性方面，如果你想在循环体里面要追踪解析到的键值对，需要在大脑中保持映射 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. 编码结束后

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-2yUHCwie-1715667406345)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-wU2t6qEW-1715667406345)]