2021最新~某知名软件服务商的前端工程师笔试题

摘要：
        本片文章中的题目均来自大厂，这些企业是行业内的标杆，代表了行业的最高水准，经过了层层筛选得出了一些较好的题目，难易适中，内容丰富，笔试面试中必考或者常规试题，记录分享在此，希望看完对你有一定的帮助。 

        在本片文章中，我详细记录了做题时的想法和遇到的问题，将解题思路一丝不苟的记录了下来，在结合之后查阅文档，对题目的答案做出了详细的解释，并对知识点做出了充分的补充。

        如果文中有的地方语义有偏差，或者解释不充分，欢迎大家在文章底部留言或者私信我，我会虚心学习并及时做出修改。

        文中可能会出现没有回答或未解决的问题，因为我目前的知识量着实有限，无法每一道题都给出精确地解释，希望各位同学在看到之后，能够在下方评论区回复或私信我对其问题进行解答，这样做的目的，是为了增加文章的互动性，能够让更多小伙伴们参与进来，对知识点的研究更加充分透彻。

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?

<style>
    li {
        width: 100px;
        height: 100px;
    }
</style>
<ul style="overflow: hidden;">
    <li style="float: left;"></li>
    <li style="float: left;"></li>
</ul>

答案：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的作用，我们看下面这段代码。

<div id="app">
    {{sum}}
    <!-- 向子组件传递一个叫sum的数据, 值就是绑定的数据 -->
    <!-- 默认监听一个@update:sum="sum = $event" 事件触发后会让绑定的参数等于传递的参数 -->
    <btn :sum.sync="sum"></btn>
</div>
<script>
    Vue.component('btn', {
        // 接受传递过来的sum属性
        props: ['sum'],
        template: '<button @click="handler">点击</button>',
        methods: {
            // 绑定点击事件 发布update:sum事件
            handler: function () {
                console.log(this.sum);
                this.$emit('update:sum', this.sum + 1)
            }
        },
    })
    new Vue({
        el: '#app',
        data() {
            return {
                sum: 0
            }
        },
    })
</script>

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

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

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

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

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

扩展：实现多行文本溢出的内容替换为省略号。

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

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

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -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);

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

<div id="container">
    <a href="#" data-digit='1'>按钮</a>
    <li>dazjhda</li>
</div>

答案：可以采用事件委托的方式，为所有的元素添加点击事件，在函数内部判断是否是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语法导入模块成员

答案：如果想导入某个模块的成员，可以使用import关键字。它的语法与导出方式类似，也包含四个部分，分别是导入标识符、模块路径以及两个关键字：import和from。

import xxx from 'path'

最后感谢认真看完这篇文章的小伙伴们，感谢有你们的点赞和鼓励。学习之路漫长艰辛，因为有你们的陪伴，使我充满了学习的动力。