大厂面试都问些什么？快来看看吧。大厂经典面试题详解，祝你斩获offer

摘要：

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

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

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

1. 以下能够控制元素的盒模型的属性是

A. box-sizing

B. box-shadow

C. box-flex

D. box-pack

答案：A

解题思路： 这道题比较简单 一眼就能看出答案 box-sizing 可以控制元素的盒模型，box-shadow属性用于给元素添加阴影；这里有两个属性比较陌生box-flex和box-pack很多同学第一眼看到这两个属性都不知道是什么，这两个属性都是旧版本的伸缩属性，box-flex用户创建伸缩容器，box-pack用于主轴对其

2. 常用的HTTP协议位于CTP/IP的（）层

A. 应用层

B. 传输层

C. 表示层

D. 会话层

答案：A

解题思路：TCP/IP是互联网服务中的协议簇 它将通信过程抽象为了四层，应用层、传输层、互联网层、网络接口层。我们常用的SMTP、FTP、HTTP等协议都位于应用层中

3. 对下面代码的描述中，正确的是

setInterval(function () { console.log('你好') }, 2000)

A. 回调函数会在延迟2秒后执行一次

B. 回调函数会以2秒为间隔重复执行

C. 回调函数会在延迟2000秒后执行一次

D. 回调函数会重复执行2000次

答案：B

解题思路：这道题读完立马就能把正确答案锁定在A、B两个选项上，后面两个选项实在是太过离谱。定时器在我们平时开发中太过常用且简单了，以至于我们都没有去记，我当时看到这个题的时候，思维就出现了混淆，不知道谁是间隔执行谁是延迟执行了，稀里糊涂的选了A，希望读到这篇文章的同学能以为我为戒。记住setTimeout(); 是在指定时间之后执行代码。setInterval(); 是每隔指定的时间就执行一次代码

4. 以下属于CSS3中全新的特性的是（）？

A. 选择器

B. 动画

C. 伸缩盒

D. 阴影

答案：B、C、D

解题思路: CSS3是一个规范的集合，动画、伸缩盒、阴影都是CSS3中全新的特性，而选择器原先就存在，CSS3只是完善了它，实其拥有更加丰富的功能

5. jQuery中被誉为工厂函数的是（）？

A. ready()

B. jQuery()

C. $()

D. function()

答案： B、C

解题思路：这道题目的答案还是比较明显的，学过jQuery的同学应该可以直接看出答案。 jQuery的工厂函数是 jQuery()，而该函数还有一个别名$()，用一个美元符号来代替函数名称。

在这里提一下ready()这个方法，当我看到这个方法的时候感觉很陌生，不知道是做什么的，后面查了一下文档是一个事件，等待页面Dom树加载完成后，就开始执行。通常我们实现此功能都直接使用了简写方式$( function(){ } )很少使用这个方法。在这给小伙伴们分享一下

6. 下面的div元素，在W3C盒模型中的宽度是_____px, 在IE盒模型中的宽度是_____px。

div{
    width: 100px;
    height: 100px;
    padding: 10px;
    margin: 10px;
    border: 1px solid #000;
}

答案：122px、 100px

解题思路: 从题目可以看出既然题目都这么问了，那么可以肯定两种盒子模型的结果肯定是不同而的，我们平常使用的基本都是谷歌的调试工具，很少去使用IE，对IE盒模型了解较少。接下来我们一起来了解一下IE盒模型。

 在IE盒模型中内容的宽高将会包含内边距和边框 所以在IE盒模型中的宽度还是100px

扩展知识：什么是盒子模型？

盒子模型是从盒子顶部俯视而得的一张平面图，用于描述元素所占用的空间。盒子模型有两种，W3C盒模型和IE盒模型。它们的区别是元素的尺寸计算方式不同。使用CSS给元素添加宽高，在IE盒模型中会将元素的内边距（padding）和边框（border）计算在内。而在W3C盒模型中并不会。

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

var x = 0, y = 0;
x
++
y
console.log(x, y);

答案：0，1

解题思路：emmm~ 当我看到这题的时候就有点懵，你说谁闲的没事会这么写代码啊。我知道这里是在考自增运算符，但是问题是这个++到底加在谁身上，我本着代码从上往下执行的原则将自增算在了x上填了1、0，但是结果我错了。 后面我查阅资料才知道，如果把++运算符单独放在一行，那么他会与下面的代码合并作为一个整体被解析，相当于x；++y；所以结果为0，1

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

var x = '1', y;
switch (x) {
    case 1:
        y = 1
        break;
    case 2:
        y = 2
        break;
    case 3:
        y = 3
        break;
    default:
        y = 0
        break;
}

答案：0

解题思路： 这个题目看似在考验switch判断，实则在考验你知不知道switch表达式的匹配模式，不得不说这坑还挺深的。在switch语句中case中的表达式会进行全等（===）匹配，x的1是字符串类型，而case里面的是数组类型，所以匹配失败走默认的匹配项default，y=0。

9. 执行[,,z] = [1,2,3]后，z的值为_____。

答案： 3

解题思路：这道题目考察的是对数组结解构是否了解，从题目上看答案也是相对比较清晰的，即使不太了解数组解构大概也能猜出来。数组结构可以有选择性的赋值，只要在数组指定的位置上不提供元素，就能为其省去结构赋值。数组的第3个元素提供了变量名，而在此之前只有两个用于占位的逗号。

10. HTML的含义是什么？什么是XHTML？

答案：THML是超文本标记语言，用于创建网页的标记语言。 HTML的格式比较松散，这会导致一些问题，比如兼容性差、移植性差等。为了解决这些问题，W3C在2000发布了XHTML，做为HMTL的一个子集，它完全兼容HTML，但格式更加严谨。

11. 什么是css预处理器？

答案：CSS预处理器，能为CSS增加新的编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决了CSS代码难以复用，代码冗余，可维护性低的问题，对CSS来说这不是锦上添花，而是雪中送炭。常见的CSS预处理器有less，sass，stylus等。

12. 请简单介绍一下HTTP

答案：HTTP即超文本传输协议，是一种获取网络资源的应用层协议。它是互联网通信的基础，由请求和响应构成。通常 首先客户端会向服务端发起请求，让后用传输层的TCP建立连接，最后服务器响应请求，做出应答，回传数据报文。

13.相等（==）和全等（===）运算符有哪些区别？

答案：相等（==）运算符用于判断两个操作数是否相等，操作数会进行类型转换。全等运算符（===）会严格判断两个操作数是否相等，操作数不会进行类型转换。

14.split() 与 join() 方法有哪些区别

答案：首先两者所属的对象不同，split()方法是属于String和RegExp的，而join()方法是Array的，其次split()方法能将字符串分隔为数组，而join()方法能将数组中的元素衔接成一段字符串。

15.两个运算符typeof与instanceof有哪些区别？

答案：typeof两者之间主要有以下三个区。

typeof运算符用于检测数据类型。而instanceof运算符用于检测对象之间的关联。

typeof运算符执行完后会返回一个小写字母的类型字符串。而instanceof运算符，执行完后会返回一个布尔值。

typeof运算符只需一个操作数，这个操作数可以是基本类型或函数。而Instanceof运算符需要两个操作数，并且左操作数不能是基本类型。右操作数必须是函数，否则运算结果将会没有意义。

16. let和const两个关键字与var之间有哪些不同？ 

答案：简单的说，有以下3点不同之处。

一，不允许变量提升。

二，不允许重复声明。

三，不覆盖全局变量。

17. Array.of() 有什么作用？ 

答案：ES6为Array对象新增的第一个静态方法是of(),用于创建数组，它能接收任意数量的参数。返回值是由这些参数组成的新数组。

18.yield和return有哪些区别？ 

答案：yield和return有许多区别，可简单概括其中5点。

yield是一个关键词，而return是一个运算符。

yield只能出现在生成器中，而return无此限制。

yield能暂停函数的执行，而return是直接终止。

在一个函数中可执行多次yield的，而return只能执行一次。

yield只能返回IteratorResult对象而return能返回任意值

19. 什么是Virtual DOM？

 答案：virtualDOM（虚拟DOM）是构建在真实dom之上的一层抽象，它将dom元素映射成内存中的javascript对象。即通过 React.createElement() 得到的React元素。形成一颗javascript对象树。

20.React V16.3中有哪些生命周期方法被标记为过时？ 

答案：有三个生命周期方法被标记为过时：componentWillMount、componentWillReceiveProps()、和component.WillUpdate。虽然目前他们仍然有效，但是不建议在新代码中使用。官方为他们新增的一个以“UNSAFE_”作为前缀的别名。

 21. React中的状态提升是指什么？

答案：兄弟组件之间不能直接通信，需要借助状态提升的方式，间接实现信息的传递。把组件之间需要共享的状态提升至最近的父组件中由父组件来统一管理。

22. 如何用React Router实现重定向？ 

答案：React Router提供的Redirect组件，可导航到一个新地址，类似于服务端的重定向。

23. Webpack加载器有哪些用途？ 

答案：加载器（loader）能在webpack加载模块时对其进行预处理。几对模块的代码进行转换，下面列出加载器的几个比较经典的用途。

将浏览器无法识别的JSX，Sass等语言转换为可识别的javascript。Css等语言。

把图像转换成data url格式嵌入到javascript文件中。

用Es6的Import，关键字将Css文件引入到javascript中。

24. FiddlerCore 是什么？

答案： FiddlerCore是一个.NET类库，可以集成到.net应用程序中提供了Fiddler代理功能，可用来捕获，过滤或修改http和https流量，而不必借助Fiddler UI，想自动化测试这类情况就很适合用FiddlerCore

25. <keep-alive>元素有什么作用?

答案：<keep-alive>元素能缓存组件的状态。虽然他能包裹任意数量的元素，但是只能渲染其中一个子元素。并且自身不会渲染成一个动物元素，由此可知，<keep-alive>元素类可包含条件指令，但不能包含v-for指令。

26. 请用纯css实现一个三角形。

答案：

div{
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
}

答题思路： 这个题目比较简单，先将元素的宽高设置0px，边框宽度设置为50px，四个边的边框可以拼成一个正方形，然后将其余三个边框的颜色设置为透明，剩下的部分就是一个三角形。

27. 请用javascript实现冒泡排序

答案：

function bubbleSort(arr) {
    var temp;
    for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
            if (arr[i] > arr[j]) {
                // 可以利用解构赋值交换两个变量的值
                // [arr[j], arr[i]] = [arr[i], arr[j]]

                temp = arr[i]
                arr[i] = arr[j]
                arr[j] = temp
            }
        }
    }
    return arr
}
console.log(bubbleSort([6, 8, 9, 3, 2, 4, 7, 5, 1]))

解题思路：冒泡排序是一种最基本的排序算法，其核心思想是比较相邻两个位置的元素。当满足指定条件时，交换两者的位置，当不满足条件时保持不变。

 28. 请实现一个遍历1~100的循环，在能被3整除时输出‘three’，在能被5整除时输出‘five’，在能被同时被3和5整除时输出‘all’。

答案：

for (let i = 1; i <= 100; i++) {
    if (i % 3 === 0 && i % 5 === 0) {
        console.log('all', i)
    } else if (i % 3 === 0) {
            console.log('three', i)
    } else if (i % 5 === 0) {
        console.log('five', i)
    }
}

解题思路：这个题比较简单 判断一下 i 能不能被整除就可以了。在javascript中，如果对两个整数（即两个操作数）进行取余运算，得到的余数为零，那么就确定执行了一次整除操作。

29. 不借助第三方类库，用多种方式读取下面文本框中的value属性值。

<form action="#" id="register">
    <input id="txt" type="text" value="1">
</form>

答案：

// 使用DOM中的查找方法querySelector获取文本框。
var txt = document.querySelector('#txt').value  
// 使用DOM中的查找方法getElementById获取文本框。
var txt1 = document.getElementById('txt').value
// 使用document对象的forms属性，先通过数字索引获取表单元素。在通过控件的id属性获取文本框。
var txt2 = document.forms[0].txt.value
// 通过form对象的elements属性来获取文本框。
var txt3 = document.forms[0].elements[0].value

解题思路：我看到这个题的时候emmm~ 确实我可以获取到，但是题目中要求使用多种方式获取。我想了一下除了通过获取到DOM元素.value 获取到值之外，好像确实不知道怎么通过别的方式获取到value值，于是顺手写了两种，

var txt = document.querySelector('#txt').value
var txt1 = document.getElementById('txt').value

两种写法都可以获取到value值，但是感觉有点违背题目的宗旨，而且都是通过获取到DOM之后.value得到的值。两种写法的的意思相同。

 30. 如何利用数组解构交换两个变量的值

答案：

[x, y] = [1, 2]
console.log(x, y);  // 1 2 
[y, x] = [1, 2]
console.log(x, y);  // 2 1

解题思路：在数组解构时，解构会按顺序作用于数组的元素上，也就是说，变量或对象的属性要取谁的值与它所在的位置有关，位置交换后，变量被赋值的值也会随之改变。