面试真题|2021最新~某知名软件服务商的前端工程师笔试题——看完你也可以进大厂（附带答案和解题思路） vue|js|面试

摘要：
本片文章中的题目均来自大厂，这些企业是行业内的标杆，代表了行业的最高水准，经过了层层筛选得出了一些较好的题目，难易适中，内容丰富，笔试面试中必考或者常规试题，记录分享在此，希望看完对你有一定的帮助。
在本片文章中，我详细记录了做题时的想法和遇到的问题，将解题思路一丝不苟的记录了下来，在结合之后查阅文档，对题目的答案做出了详细的解释，并对知识点做出了充分的补充。
如果文中有的地方语义有偏差，或者解释不充分，欢迎大家在文章底部留言或者私信我，我会虚心学习并及时做出修改。
文中可能会出现没有回答或未解决的问题，因为我目前的知识量着实有限，无法每一道题都给出精确地解释，希望各位同学在看到之后，能够在下方评论区回复或私信我对其问题进行解答，这样做的目的，是为了增加文章的互动性，能够让更多小伙伴们参与进来，对知识点的研究更加充分透彻。

1. HTML5的新特性不包括？
A. 语义化的Web
B. 削弱对第三方插件的依赖
C. 新增SVG绘画
D. 引入Web Workers规范

答案：C
解题思路：SVG是一种用XML描述图形的标记语言

2. 以下属性选择器表示属性值以“val-”开头的是？
A. [attr^="val"]
B.[attr~="val"]
C. [attr|="val"]
D. [attr$="val"]

答案：C
解题思路：

A. [attr^="val"]// 表示属性值以字符串类型的“val”开头

B.[attr~="val"]// 表示属性值用空格分隔为多个值，其中一个值与字符串"val"相同

C. [attr|="val"]// 表示属性值以“val-”开头

D. [attr$="val"]// 表示属性值以字符串“val”结尾

3. HTTP 请求报文由5部分组成，以下不属于请求报文的是?
A. 请求方法
B. 状态码
C. HTTP版本
D. 请求首部

答案：B
解题思路：状态码是http响应报文中的组成部分。

4. 下列选项不是Array（即数组）对象的方法是？
A.push（）
B. shift()
C. split()
D. join()

答案：C
解题思路：split属于String和RegExp对象。能将字符串分割为数组。

5. 以下关于排序算法的描述中正确的是？
A. 快速排序的平均时间复杂度为O(nlogn)，最坏时间复杂度为O(nlogn)
B. 推排序的平均时间复杂度为O(nlogn)，最坏时间复杂度为O(n^2)
C. 冒泡排序的平均时间复杂度为O(n^2)，最坏时间复杂度为O(n^2)
D. 归并排序的平均时间复杂度为O(nlogn)，最坏时间复杂度为O(n^2)马上！没事的话，具体还是发视频。

答案：C
解题思路：各种算法的性能见下表

文章图片

6. 怪异模式中的怪癖行为包括
A. 宽度和高度的算法与W3C盒模型不同
B. 在表格中的字体样式，如front-size等不会继承
C. 当内容超出容器高度时，会自动剪裁超出的内容
D. 颜色值必须用16进制标记法

答案：A、B、D
解题思路：在怪异模式中，当内容超出容器高度，将会把容器拉伸而不是溢出

7.可以作为css中display属性值的有
A. list-item
B. table
C. run-in
D. flex

答案：A、B、C、D
解题思路：在css中用display属性指定元素的盒类型，以上四个选项都是他的值。

A. list-item// 列表

B. table// 表格

C. run-in// 根据周围元素的盒类型来决定当前元素的盒类型

D. flex// 伸缩盒

8. 下面对于HTTP状态码描述正确的是？
A. 200表示请求已被正常处理你的室友
B. 304表示资源未被修改
C. 403表示请求以为服务器拒绝
D. 503表示服务器无法处理请求

答案：A、B、C、D
解题思路：状态码的让客户端知道请求结果，服务器是成功处理的请求，还是出现了错误，又或者是不处理，题中四个选项都正确地描述了指定的状态码的含义。

9. 执行下面的代码后，ul元素的高度是____px?

li { width: 100px; height: 100px; }

答案：100px
解题思路：虽然ul元素包含一个浮动的子元素，但因为创造了bfc所以不会引起ul元素的高度塌陷，它的高度就是li元素的高度。

10. 4 + 3 + 2 + '1' = _____，'1' + 2 + 4 = _____。

答案：91、124
解题思路：这个就很简单了，第一个是先做加法运算，在做拼接。第二个表达式由于第一个是字符串，因此只做拼接操作

11. 执行下面的代码后，在控制台输出的y为_____。

var y = 0, x = 1; y = x+++x;

答案：3
解题思路：由于递增运算符++的优先级高于加法运算符。因此表达式x+++x，相当于(x++)+ x; 先执行后置递增操作，对操作数进行增量，并返回未计算的值。也就是1，然后x变量在与自身相加，此时x变量已经为2，也就是1+2，最终结果为3

12. false == "0" 得到的结果为_____， false === "0" 得到的结果为_____。

答案：true，false
解题思路：相等运算符在进行比较时会进行类型转换，全等运算符进行比较时不会进行类型转换。

13. 执行（{ a: e, a: f } = {b: 5, a: 6})后，e的值为_____，f的值为______。

答案：6， 6
解题思路：对象结构允许多个同名属性，等号左侧的对象中虽然包含了两个a属性，但两个变量e和f都被成功赋值。
对象解构的内部机制是先找到同名属性，让后在赋值给对应的变量，真正被赋值的是后者，而不是前者。
在以上代码中 a只是匹配模式，e，f才是变量，真正被赋值的是变量e，f而不是模式。

14. HTML和HTML5的区别有哪些？

答案： Html和html5的主要有以下五种区别。
旧版本的html比较依赖浏览器的插件，例如播放视频需要安装flash插件。
由于html5不再支持SGML，所以声明文档类型，DOCTYPE只有一。
html5消除了过时或冗余的元素，如font， Center.等
html5新增了的许多语义化的元素。如active header等核心功能如video canvas的，并提供更好的跨平台支持。
随着html5功能的不断完善，促进了Web App与Hybrid App的发展。同时也影响了 Native App的市场占有率。

15. Css是指什么？

答案：Css即层叠样式表是一种样式语言，用于控制页面的表现。外观和内容排版，它对html来说是一种有效的补充。

16. 什么是外边距塌陷？

答案：外边距塌陷，也称外边距合并，是指两个在正常流中相邻的会计元素的外边距，组合在一起变成单个外边距，不过只有上下外边距才会有塌陷，左右外边距不会出现这种问题

17.请谈一下对计算机网络的理解？

答案：在20世纪80年代计算机网络诞生，他能将一台台独立的计算机相互连接。使得位于不同地理位置的计算机可以进行通信，实现信息传递和资源共享，形成一组规模大，功能强的计算机系统，不过计算机要想在网络中正常通信，必须遵守相关网络协议的规则，常用的网络协议有tcp，udp，ip和http等。

18. JavaScript有哪些优势和劣势？

答案：
首先了解一下javascript的优势。

Javascript可在客户端替服务器分摊掉一些工作，如数据验证。数学计算等，从而减少和服务器的交互次数，降低了服务器的压力。

用户能够快速得到页面上的反馈，除了一些必须与服务器东西的吵。如数据提交，验证昵称重复等，这些操作会有无法避免的网络延迟，而其他在客户端运行的大部分操作，都能得到及时反馈。

跨平台，Javascript不会依赖操作系统，如windows，iOS等，只要有浏览器就能正常执行。

界面丰富，交互性强，javascript。可以控制文档中的任何元素，定义元素的内容。样式或行为用javascript代替css，实现复杂而多样的动画或特效

再来了解一下javascript的劣势。

兼容性低，各个浏览器对javascript的支持程度不同，同意他脚本放在不同浏览器中的执行结果会不同。有的可以完美执行，有的可能会提示错误。

安全性低，由于javascript在客户端运行，用户不但可以查看javascript源代码。还能恶意嵌入代码替换或禁用脚本。

中断运行javascript是一种直译语言，所以只要有一条出错。那么就会直接停止运行。

权限限制，javascript不能直接与操作系统交互，中间有浏览器。浏览器只赋予了javascript很少的权限，像写文件操作都是不允许的。

19. 在DOM中，事件对象的两个属性target和currentTarget有什么区别？

答案：Target属性指向的是事件目标，currentTarget属性指向的是正在处理当前事件的对象。在发生事件传播是target指向的可能不是定义时的事件目标。

20. 在http响应报文中会包含哪些首部？

答案：在http响应报文中会包含通用首部，实体首部，响应首部等。例如通用首部中的Connection用来管你持久连接，响应首部中的server表示服务器软件的名称和版本。实体首部中的content-encoding可指定内容编码格式，告知客户端，用这个编码格式解压。

21. 扩展运算符(...)的用途有哪些？

答案：扩展运算符的用途可简单概括为以下3种

替代函数的apply()方法

简化函数传递时的参数传递方式

处理数组和字符串

22. find() 和 indexOf() 有哪些区别？

答案：find() 是对indexOf() 的一种补充，indexOf() 只能通过全等匹配来搜索指定的值，而find() 可以自定义匹配条件。

23. 类有哪些成员？

答案：类的成员既可以是普通的原型方法或自有属性，还可以是有特殊功能的构造函数、生成器、静态方法和访问属性等，并且成员名可以是表达式。

24. Shadow DOM 和 Virtual DOM之间有哪些区别？

答案：Shadow DOM是一种浏览器技术，为Web组件中的DOM和CSS提供了封装，并且封装的部分功能与主文档的DOM保持分离，而Virtual DOM是一种有JavaScript类库基于浏览器API实现的概念。

25. Vue.js中的.sync修饰符有什么作用？

答案：.sync修饰符它是一个语法糖，可在声明组件时省略updata:xxx事件。
为了解释清楚这个问题，这里写了一个demo来演示.sync的作用，我们看下面这段代码。

{ {sum}}

btn组件能接受从根实例传递过来的sum属性，单击模板中的按钮会触发组件上的"update:sum"事件，并传入一个新值；在btn组件上声明的update:sum事件，能接收传过来的新值，并对sum进行更新；更新后的sum属性又能传递给btm组件，从而实现了双向数据绑定。

26. 如何用纯css的方式让超出容器宽度的文本自动替换为省略号？

答案：可以使用text-overflow属性，这个属性用于显示内容溢出时的省略号标记，如果内容太多，将超出部分替换为省略号... 。但是要实现这个效果，需要先满足3个条件，那就是容器要有明确的宽度，强制在一行显示以及隐藏溢出内容，代码入下所示：

div { width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字

把text-overflow设置为ellipsis后，就能将溢出的内容替换为省略号。

扩展：实现多行文本溢出的内容替换为省略号。
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

div { display: -webkit-box; width: 200px; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }文字是人类用符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

27. 编写一个函数，能让两个并不大的小数正确相乘

答案：由于JavaScript中的浮点数计算精度远远不如整数，那么可以先将小数变为整数，在执行乘法运算，最后把小数点移动到指定位置。

function AccMul (num1, num2) { var result,// 计算结果 m = 0,// 整数位数 s1 = num1.toString(), // 转为字符串 s2 = num2.toString(); m += s1.split('.')[0].length m += s2.split('.')[0].length result = Number(s1.replace('.', '')) * Number(s2.replace('.', '')) // 让两个整数相乘 result /= Math.pow(10, m)// pow() 方法可返回 x 的 y 次幂的值。小数点往左移动指定位数 return result } console.log(AccMul(2.3, 2.6));

28.统计字符串"xxxxyyydda"中每个字母出现的次数

答案：将字符串结构为数组，在创建一个空对象用于记录统计的数据。然后循环数组，判断对象中有没有这个属性有就++，没有就添加属性赋值为 1。最后打印这对象就能得到各个字符出现的次数。

var str = "xxxxyyydda" var arr = [...str] var obj = {} arr.forEach(item => { if (obj[item]) { obj[item]++ }else { obj[item] = 1 } }); console.log(obj);

【面试真题|2021最新~某知名软件服务商的前端工程师笔试题——看完你也可以进大厂（附带答案和解题思路）】

29. 假设下面div元素中的a元素，可以动态添加，现在要求单击任何的a元素，都能让它的自定义属性data-digit的值和内容进行拼接，在用alert()方法输出拼接后的结果。

按钮 dazjhda

答案：可以采用事件委托的方式，为所有的元素添加点击事件，在函数内部判断是否是a标签，如果不是a标签直接结束函数，是a标签就获取元素的内容和自定义属性的值，进行拼接用alert()方法输出拼接后的结果。

var div = document.querySelector('#container'); div.addEventListener('click', function (event) { // 判断元素是不是a标签 if(event.target.localName != 'a') return // 获取自定义属性的值和元素内容进行拼接 alert(event.target.innerText + event.target.getAttribute('data-digit')) })

30. 如何用ES6语法导入模块成员