解析大厂前端笔试真题，超详细，一看就懂！（一）

电玩女神 2023-01-11 01:20 127阅读 0赞

![c53bcb418ae8a09583f4eea8d6310edc.png][]

# 关于该文章的说明 #

这是关于大厂面试题的整理，是一些个人觉得有价值的题和自己的错题。所以本文适合刷笔试题的朋友看。

高中的时候记得每门学科都会有错题本。前几天做题就想着什么时候把自己练习的错题整理到一起，玲珑觉得笔试题做的不在多，而是能够达到做一题会一类的效果。所以便有了这篇文章，文章也会随着做题的数量越来越长。

也希望能和其他朋友一起讨论前端的知识，一起进步，多学习点东西。

# 第一套：网易2020校招提前批 #

## 第五题 ##

### 考点：数据结构中的排序 ###

### 题目 ###

![eceb3711a01d0a883e1ea52741c26b0a.png][]

### 解析 ###

这道题考的是排序，那么我们就要知道每种排序的思想和特点。恰好直接插入排序符合题目说的要求。该排序有两层循环，第一层将这个数组完整遍历一遍控制趟数，第二层循环将准备插入的数与前面排好的数从后向前扫描比较大小。而希尔排序会考虑到分组。

## 第四题 ##

### 考点：js的隐式类型转换 ###

### 题目： ###

![a4d06c90fcdc4b3c76cfc60ea8913ba7.png][]

在试图输出变量的时候会进行隐式转换，自动调用变量的tostring和valueof方法。

### 做题必备小知识 ###

和=的区别：

*  出现==： 我们可以将=看作的严格模式，当的时候如果数据类型相同那么就会转换成=；如果数据类型不同那么会自动的进行一次类型转换，转换成相同的类型后进行比较。
 *  出现===：出现三个等号的时候，首先判断的是类型是否相等，如果不相等就会返回false

valueOf方法和toString方法默认调用toString方法

*  这是为什么呢，我看的有些博客直接说默认调用toString并没有说明原理。其实是这样的，我们看下面的一个例子，虽然colors.valueOf()方法返回的还是一个数组，但是在alert输出的时候隐式调用了toString方法，所以结果是相同的。
 *  但是如果是数值运算优先调用valueOf()方法。

var colors = ["red", "blue", "green"]; // 创建一个包含3 个字符串的数组  
    alert(colors.toString()); // red,blue,green  
    alert(colors.valueOf()); // red,blue,green  
    alert(colors); // red,blue,green

### 解析 ###

*  第一次输出：arr==="";类型都不同，不会调用toString也不会调用valueOf。返回false
 *  第二次输出：arr=="";类型不同但是调用toSrting再进行比较。最后返回true
 *  第三次输出：arr===1；结果是false道理同第一次输出
 *  第四次输出：arr==1；结果是true，道理同第二次输出，两个方法不是都被重写，调用的是toString方法。
 *  第五次输出：arr == 2；结果是true，调用valueOf方法。
 *  第六次输出：类型都是同样的object，但是值不相同，所以返回的结果是false

## 第五题 ##

### 考点：let特点，改变this指向 ###

### 题目： ###

![4d0aba561175a3f3296b0cbc8719820a.png][]

### 解析: ###

*  fun()是在全局window上调用，但是全局并没有a，使用let和const声明的变量不属于window对象，所以打印undefind
 *  fun.aplly(obj)改变this指向，结果是1.
 *  值得一提的是第三个。fun.bind(obj1).apply(obj);先通过bind让this绑定到obj1，然后会返回一个新的函数并不执行；且这个新函数确定了this和形参，无法再改变。因而后面的apply相当于失效。结果是2。
 *  第四个new fun()考察new的过程
    
     *  1.生成一个新对象
     *  2.获得构造函数链接到原型
     *  3.绑定this执行构造函数
     *  4.返回新对象 这个题目里面构造函数没有a属性，返回undefined。

## 第十题 ##

考点：flex布局计算

### 题目 ###

![e3d1e48d2ccbda9b3518cf26b0f00d25.png][]

### 解析: ###

flex-grow: 定义项目放大比例
    flex-shrink：定义项目缩小比例
    flex-basis：定义了分配多余空间之前，项目占据主轴的空间。

我们看到父元素的宽度是200px，左右分配空间之前的宽度和100px+50px=150px；所以我们的左右盒子应该放大和是50px。根据放大比例是3:2；所以左边盒子50px+30px=80px，右盒子120px。宽度比2:3。

# 第二套：2020网易校招正式批 #

## 第8题 ##

### 考点：箭头函数没有this ###

### 题目： ###

![603ca25ba8b43fb5d204c3aeabc13c48.png][]

### 解析： ###

箭头函数不绑定this，箭头函数不绑定自己的this关键字，如果在箭头函数中使用this，那么this将会指向箭头函数定义位置的this。 我们看下面的一个例子

function fn (){
        console.log(this);
        return ()=> {
            console.log(this);
        }
    }
    const obj = {name:'zhangshan'};
    const resFn = fn.call(obj);
    resFn();

const resFn = fn.call(obj);让fn的this绑定到obj上；执行resFn()函数就是执行返回的箭头函数，打印的this是fn的this，也就是obj。

然后·回到我们这个题，也是一样的道理，三次都指向共同的父亲的this，也就是箭头函数定义位置的this。三次返回的结果都是foo.

# 第三套：小米校招前端笔试题1 #

## 第五题 ##

### 考点：js中的加号含义 ###

### 题目 ###

![1835ccfcb5f56221d475cb8e3f8d779a.png][]

### 解析 ###

我们先来复习一下js中的六大数据类型，undefined、null、string、number、booleam五种基本类型和引用类型object，除基本类型的都是引用类型例如array、function等。

然后加号最终会存在两种类型转换： 1、当加号两边存在符串的时候按照字符串处理拼接成字符串 2.当没有字符串就当数字处理。所以这个李牧两次都应看成字符串的拼接。

## 第12题 ##

### 考点：二叉树遍历 ###

### 题目 ###

![29549d87dff38b2027165cdc4ddc8a54.png][]

### 解析： ###

根据前序遍历和中序遍历的特点，c为根节点，所以BAFE是c的左子树，剩余结点是c的右子树。然后我们可以画出如下图所示的二叉树，再后续遍历先遍历左子树，再遍历右子树，最后根节点。结果是bfeahgdc

![724f20f21ecc5194635f4483908235d6.png][]

## 第13题 ##

### 考点：数组二分查找 ###

### 题目 ###

![0e0e773ba0a09fafc388ea5621fbd4c9.png][]

### 解析： ###

待解决

# 最后 #

前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。

千里之行始于足下，愿你我共勉。

金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等。

**HTML 篇**

*  图片中 title 和 alt 区别？
 *  Html5 有哪些新特性、移除了哪些元素
 *  浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
 *  行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
 *  canvas在标签上设置宽高 和在style中设置宽高有什么区别
 *  浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

**CSS 篇**

*  CSS中link与@import的区别：
 *  position的absolute与fixed共同点与不同点：
 *  BFC 有什么用
 *  清除浮动的几种方式
 *  Css3 新增伪类 - 伪元素
 *  IE盒子模型 、W3C盒子模型
 *  display:inline-block 什么时候不会显示间隙？
 *  行内元素float:left后是否变为块级元素？

![02d97b7d1a8ae1d3b01bc61cd97624ee.png][]

**JavaScript篇**

*  js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
 *  js拖拽功能的实现
 *  异步加载js的方法
 *  js的防抖
 *  绕不过去的闭包
 *  说说你对作用域链的理解
 *  JavaScript原型，原型链 ? 有什么特点？
 *  请解释什么是事件委托/事件代理
 *  Javascript如何实现继承？

**Vue**

*  vue中 key 值的作用
 *  Vue 组件中 data 为什么必须是函数？
 *  vuex的State特性是？
 *  介绍一下Vue的响应式系统
 *  computed与watch的区别
 *  介绍一下Vue的生命周期
 *  为什么组件的data必须是一个函数
 *  组件之间是怎么通信的

> **由于篇幅有限，只能分享部分面试题，更多面试题及答案可以[【点击我】][Link 1]阅读下载哦~无偿分享给大家，算是一个感恩回馈吧**

![4c499713ccebb5cfc34b74d0f73aa0b2.png][]

**React**

*  介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
 *  React-Redux到react组件的连接过
 *  Redux中间件是什么东西，接受几个参数
 *  redux请求中间件如何处理并发
 *  如何配置React-Router
 *  路由的动态加载模块
 *  React生命周期及自己的理解，以及V16对生命周期的修改
 *  为什么使用虚拟dom？

**浏览器**

*  跨标签页通讯
 *  浏览器架构
 *  浏览器下事件循环(Event Loop)
 *  从输入 url 到展示的过程
 *  重绘与回流
 *  存储
 *  Web Worker
 *  V8垃圾回收机制
 *  内存泄露
 *  reflow(回流)和repaint(重绘)优化
 *  如何减少重绘和回流?
 *  一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
 *  localStorage 与 sessionStorage 与cookie的区别总结

![76722e51ef118d80817542d3d9458788.png][]

> **更多面试题及答案可以[【点击我】][Link 2]阅读下载哦，无偿分享给大家~**

[c53bcb418ae8a09583f4eea8d6310edc.png]: /images/20221119/f6c1b9b32dac421aaa3c8911d1b7deeb.png
[eceb3711a01d0a883e1ea52741c26b0a.png]: https://img-blog.csdnimg.cn/img_convert/eceb3711a01d0a883e1ea52741c26b0a.png
[a4d06c90fcdc4b3c76cfc60ea8913ba7.png]: https://img-blog.csdnimg.cn/img_convert/a4d06c90fcdc4b3c76cfc60ea8913ba7.png
[4d0aba561175a3f3296b0cbc8719820a.png]: https://img-blog.csdnimg.cn/img_convert/4d0aba561175a3f3296b0cbc8719820a.png
[e3d1e48d2ccbda9b3518cf26b0f00d25.png]: https://img-blog.csdnimg.cn/img_convert/e3d1e48d2ccbda9b3518cf26b0f00d25.png
[603ca25ba8b43fb5d204c3aeabc13c48.png]: https://img-blog.csdnimg.cn/img_convert/603ca25ba8b43fb5d204c3aeabc13c48.png
[1835ccfcb5f56221d475cb8e3f8d779a.png]: https://img-blog.csdnimg.cn/img_convert/1835ccfcb5f56221d475cb8e3f8d779a.png
[29549d87dff38b2027165cdc4ddc8a54.png]: https://img-blog.csdnimg.cn/img_convert/29549d87dff38b2027165cdc4ddc8a54.png
[724f20f21ecc5194635f4483908235d6.png]: https://img-blog.csdnimg.cn/img_convert/724f20f21ecc5194635f4483908235d6.png
[0e0e773ba0a09fafc388ea5621fbd4c9.png]: https://img-blog.csdnimg.cn/img_convert/0e0e773ba0a09fafc388ea5621fbd4c9.png
[02d97b7d1a8ae1d3b01bc61cd97624ee.png]: https://img-blog.csdnimg.cn/img_convert/02d97b7d1a8ae1d3b01bc61cd97624ee.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=ZEKfV3Ax
[4c499713ccebb5cfc34b74d0f73aa0b2.png]: https://img-blog.csdnimg.cn/img_convert/4c499713ccebb5cfc34b74d0f73aa0b2.png
[76722e51ef118d80817542d3d9458788.png]: https://img-blog.csdnimg.cn/img_convert/76722e51ef118d80817542d3d9458788.png
[Link 2]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DZEKfV3Ax