2024年Web前端最全那些年，几道”老生常错“的前端面试题(四)，腾讯3轮面试都问了前端事件分发

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

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

1. 请生成一个16位的随机数字；

---

可以 String(Math.random()).split(‘.’)[1].slice(0, 16);  当然，还有很多其他一些方法。使用new Date().getTime()或类似方法的不得分。

2.所有题目公用一个上下文，已知数组：

---

let arr = [1,2,3];

1. arr的长度是多少？

2. 去除arr中的空数组项;

3. arr2 = arr.map(parseInt)，请写下arr2的内容;

4. arr和arr2合并成数组arr3。

5. 去除数组arr3中重复内容

答案：

第一题，空数组项也会作为length的一部分；空数组项和空字符串项是有区别的。结果是4。

第2题 本题只是过滤空数组项，不包括null, undefined这类，去除空数组项两个比较好的回答：

数组中的 empty 元素不会参与数组项遍历，故只需返回 true 即可过滤掉 empty 元素（而不会牵连 0、NaN、null、undefined、‘’ 这些）

arr.filter(it => true)

注意走for循环，还是会遍历empty数组项。或者filter方法参数直接就是一个function即可。例如：arr.filter(Number)， arr.filter(String)

上面并不会最好的方法。数组有个API，天然去除空数组项，arr.flat()。flat()可以让数组扁平化的方法。

第3题标准答案应该是[1, NaN, NaN]，map里面Function支持参数(value, index, arr)。

第4题就是concat，可以数组合并，arr3 = arr.concat(arr2)。如果不考虑兼容，可以[...arr, ...arr2]。其他参考方法：Array.prototype.push.apply(arr3, arr2)，也可以[].push.apply(arr3, arr2)，此时arr3是合并后的数组。

第五题，数组去重。使用Array.from(new Set(arr3))，或者[...new Set(arr3)]。

3.关于字符串处理：

---

1. 写一个名为toCamelCase的方法，实现把类似’abc-def-ghi’的字符转换成’abcDefGhi’。

2. 写一个名为toDashJoin的方法，实现把驼峰形式字符串’abcDefGhi’转换成’abc-def-ghi’。

3. 写一个名为toCapitalize的方法，实现首字母大写功能（原来字母就是大写的不处理），如’i like css’转换成’I Like Css’。

4. 写一个名为toBetterUrl的方法，实现把类似’CSS value type’转换成’css-value-type’（只需考虑空格和大小写处理）。

「参考答案：」

function toCamelCase(str){

return str.replace(/-(.)/g,function($0,$1){

console.log($0,$1)

return $1.toUpperCase()

})

}

console.log(toCamelCase(“abc-def-ghi”));

function toDashJoin(str){

return str.replace(/[A-Z]/g,function($0){

return ‘-’+$0.toLowerCase()

})

}

console.log(toDashJoin(“abcDefGhi”));

function toCapitalize(str){

return str.replace(/(\s+|^)(\w)/g,function($0,$1,$2){

return $1+$2.toUpperCase()

})

}

console.log(toCapitalize(‘i like css’));

function toBetterUrl(str){

return str.replace(/[A-Z]/g,function($0){

return $0.toLowerCase()

}).replace(/\s+/g,‘-’)

}

console.log(toBetterUrl(‘CSS value type’));

4.在一个Web页面中有很多的链接和图片，例如：

---

链接1

链接2

链接1

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

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

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

.png)

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

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。