太棒了！2018-2020前端经典面试题整理合集，还附带大厂面试题分享！

2018到2020年，3年经典面试题整理合集，话不多说，直接上题。

1，盒模型

1.1，ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法如下：

/* 标准模型 */box-sizing:content-box ;
/*IE 模型*/box-sizing:border-box ;

1.2，几种获得宽高的方式

dom.style.width/height 这种方式只能取到 dom 元素内联样式所设置的宽高，也
就是说如果该节点的样式是在 style 标签中或外联的 CSS 文件中设置的话，通过这种
方法是获取不到 dom 的宽高的。
dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就
是说不管是哪种方式设置的样式，都能获取到。但这种方式只有 IE 浏览器支持。
window.getComputedStyle(dom).width/height 这种方式的原理和 2 是一样的，这
个可以兼容更多的浏览器，通用性好一些。
dom.getBoundingClientRect().width/height 这种方式是根据元素在视窗中的绝对
位置来获取宽高的
dom.offsetWidth/offsetHeight 这个就没什么好说的了，最常用的，也是兼容最好
的。

1.3，拓展各种获得宽高的方式

获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height/width
获取屏幕工作区域的高度和宽度（去掉状态栏）：window.screen.availHeight/availWidth
网页全文的高度和宽度： document.body.scrollHeight/Width
滚动条卷上去的高度和向右卷的宽度： document.body.scrollTop/scrollLeft
网页可见区域的高度和宽度（不加边线）： document.body.clientHeight/clientWidth
网页可见区域的高度和宽度（加边线）： document.body.offsetHeight/offsetWidth

1.4，距重叠解决方案(BFC) BFC 原理

内部的 box 会在垂直方向，一个接一个的放置每个元素的 margin box 的左边，与包
含块 border box 的左边相接触（对于从做往右的格式化，否则相反）
box 垂直方向的距离由 margin 决定，属于同一个 bfc 的两个相邻 box 的 margin 会发
生重叠
bfc 的区域不会与浮动区域的 box 重叠
bfc 是一个页面上的独立的容器，外面的元素不会影响 bfc 里的元素，反过来，里面
的也不会影响外面的
计算 bfc 高度的时候，浮动元素也会参与计算创建 bfc ? float 属性不为 none（脱离文档流）
position 为 absolute 或 fixed
display 为 inline-block,table-cell,table-caption,flex,inine-flex ? overflow 不为 visible
根元素 demo

2，居中方法

水平方向上

针对 inline, 内联块 inline-block, 内联表 inline-table, inline-flex 元素及img,span,button 等元素

.text_div{
text-align:center;
}
不定宽块状元素居中
.text_div{
margin:0 auto;//且需要设置父级宽度
}

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

.wrap{
float:left;
position:relative;
left:50%;
clear:both;
}
.wrap-center{
left:-50%;
}

垂直居中

单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

.text_div{
height: 120px;
line-height: 120px;
}

利用表布局

.father {
display: table;
}
.children {
display: table-cell;
vertical-align: middle;
text-align: center;
}

flex 布局

.center-flex {
display: flex;
flex-direction: column;//上下排列
justify-content: center;
}

绝对布局方式

已知高度

.parent {
position: relative;
}.child {position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

未知高度

.parent {
position: relative;
}.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

垂直水平居中根据上方结合

flex 方式
.parent {
display: flex;
justify-content: center;
align-items: center;
}

grid 方式
.parent {
height: 140px;
display: grid;
}

.child {
margin: auto;
}

3，css 优先级确定

每个选择器都有权值，权值越大越优先
继承的样式优先级低于自身指定样式
！important 优先级最高 js 也无法修改
权值相同时，靠近元素的样式优先级高顺序为内联样式表（标签内部）> 内部样式
表（当前文件中）> 外部样式表（外部文件中）

4，如何清除浮动

不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，
子元素写了浮动后，父元素会发生高度塌陷）

clear 清除浮动（添加空 div 法）在浮动元素下方添加空 div,并给该元素写 css 样式：
{clear:both;height:0;overflow:hidden;}
给浮动元素父级设置高度
父级同时浮动（需要给父级同级元素添加浮动）? 父级设置成 inline-block，其 margin: 0 auto 居中方式失效
给父级添加 overflow:hidden 清除浮动方法
万能清除法 after 伪类清浮动（现在主流方法，推荐使用）

.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}

.float_div{
zoom:1
}

5，link @import 导入 css

（1）link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于
CSS 范畴，只能加载 CSS。

（2）link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。

（3）link 无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。

（4）link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

6， ["1", "2", "3"].map(parseInt)

首先, map 接受两个参数, 一个回调函数 callback, 一个回调函数的 this 值，其中回调函数接受三个参数 currentValue, index, arrary；而题目中, map 只传入了回调函数--parseInt.。其次, parseInt 只接受两个两个参数 string, radix(基数).

本题理解来说也就是 key 与 index

所以本题即问 parseInt('1', 0);parseInt('2', 1);parseInt('3', 2)；

parseInt(string, radix)

string 必需，要被解析的字符串。
radix 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开
头，将以 16 为基数。

7，浅拷贝和深拷贝

浅拷贝

// 第一层为深拷贝
Object.assign()
Array.prototype.slice()
扩展运算符 ...

深拷贝

JSON.parse(JSON.stringify())

递归函数

function cloneObject(obj) {
  var newObj = {} //如果不是引用类型，直接返回
  if (typeof obj !== 'object') {
    return obj
  }
  //如果是引用类型，遍历属性
  else {
    for (var attr in obj) {
      //如果某个属性还是引用类型，递归调用
      newObj[attr] = cloneObject(obj[attr])
    }
  }
  return newObj
}

8，数组去重的方法

1）ES6 的 Set

let arr = [1,1,2,3,4,5,5,6]
let arr2 = [...new Set(arr)]

2）reduce()

let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.reduce(function(ar,cur) {
  if(!ar.includes(cur)) {
    ar.push(cur)
  }

  return ar
},[])

3）filter()

// 这种方法会有一个问题：[1,'1']会被当做相同元素，最终输入[1]
let arr = [1,1,2,3,4,5,5,6]
let arr2 = arr.filter(function(item,index) {
  // indexOf() 方法可返回某个指定的 字符串值 在字符串中首次出现的位置
  return arr.indexOf(item) === index
})

9，cookie、localStorage、sessionStorage的区别和使用？

cookie：是存储在本地的数据，有时候也用cookies，通常经过加密，应用最经典的就是判断注册用户是否
已经登录过该网站。
localStorage：仅在客户端保存（即浏览器），不参与和服务器的通信；没有时间限制，即使浏览器关闭，数据依然存在；

创建和访问localStorage：

   1）、设置数据：
   var forgetData = {
   phone:vm.phone
   };
   localStorage.setItem("forgetData",JSON.Stringfy(forgetData)); 
//forgetData是存储在localStorage里边的本地数据；JSON.Stringfy(forgetData)是将数据转化
为字符串格式；

     获取数据：
   vm.forgetData=JSON.parse(localStorage.getItem("forgetData")); //将字符串
转化为JSON化；

   2）、设置：localStorage.name = "zhao";
      获取：localStorage.name  //zhao    
      localStorage.setItem(key,value);//设置数据    
      localStorage.getItem(key);//获取数据    
      localStorage.removeItem(key);//删除单个数据    
      localStorage.clear();//清除所有localStorage的数据
      
 sessionStorage：当用户的浏览器窗口关闭时，数据会被清除；

共同点：都是保存在浏览器端，且同源的。

区别：

cookie数据始终在同源的http请求中携带9即使不需要)，即cookie在浏览器和服务器之间来回
传递；cookie数据还有路径的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数
据大小不能超过4K，同时因为每次http请求都会携带cookie，所以cookie只能保存很小的数据。
sessionStorage和localStorage不会自动把数据发给服务器，只在本地保存，虽然也有大小
限制，但是要比cookie大得多，可以达到5M或者更大。

数据有效期不同，
sessionStorage仅在当前浏览器窗口关闭前有效，不能持久保存；
localStorage：始终有效，浏览器窗口关闭也一直保存；
cookie：只在cookie设置的过期时间之前保存，即使浏览器窗口关闭。

作用域不同，
sessionStorage在不同浏览器窗口的数据不能共享，即使是同一个页面；
localStorage在所有的同源窗口中都是共享的；
cookie也是在同源窗口中共享的

10、ajax请求时get和post的区别？

get：从服务器上获取数据，传送数据量小，安全性低，请求会被缓存，缓存是针对URL进行缓存的，get请求参数直接加在URL地址后面，一种参数组合就会产生一种URL的缓存，重复的请求结果是相同的；

post：向服务器发送数据；传送数据量大，请求不会被缓存，参数封装在二进制的数据体中，服务器也不会记录参数，相对安全，所以涉及用户隐私的数据都要用post传送

11、常见状态码

2开头（请求成功）表示成功处理了请求的状态代码

200 （成功）服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
201 （已创建）请求成功并且服务器创建了新的资源。
202 （已接受）服务器已接受请求，但尚未处理。
203 （非授权信息）服务器已成功处理了请求，但返回的信息可能来自另一来源。
204 （无内容）服务器成功处理了请求，但没有返回任何内容。
205 （重置内容）服务器成功处理了请求，但没有返回任何内容。
206 （部分内容）服务器成功处理了部分 GET 请求。

3开头（请求被重定向）表示要完成请求，需要进一步操作。通常，这些状态代码用来重定向

300 （多种选择）针对请求，服务器可执行多种操作。服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。
301 （永久移动）请求的网页已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302 （临时移动）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置）请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。
304 （未修改）自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。
305 （使用代理）请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理。
307 （临时重定向）服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头（请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理

400 （错误请求）服务器不理解请求的语法。
401 （未授权）请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
403 （禁止）服务器拒绝请求。
404 （未找到）服务器找不到请求的网页。
405 （方法禁用）禁用请求中指定的方法。
406 （不接受）无法使用请求的内容特性响应请求的网页。
407 （需要代理授权）此状态代码与
408 （请求超时）服务器等候请求时发生超时。
409 （冲突）服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
410 （已删除）如果请求的资源已永久删除，服务器就会返回此响应。
411 （需要有效长度）服务器不接受不含有效内容长度标头字段的请求。
412 （未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。
413 （请求实体过大）服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
415 （不支持的媒体类型）请求的格式不受请求页面的支持。
416 （请求范围不符合要求）如果页面无法提供请求的范围，则服务器会返回此状态代码。
417 （未满足期望值）服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错

500 （服务器内部错误）服务器遇到错误，无法完成请求。
501 （尚未实施）服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
504 （网关超时）服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持）服务器不支持请求中所用的 HTTP 协议版本。

12，移动端触摸事件

①touchstart：当手指触碰到屏幕的时候触发
②touchmove：当手指在屏幕上滑动的时候触发
③touchend：当手指离开屏幕的时候时候触发
④touchcancel 事件：当系统停止跟踪触摸的时候触发(这个事件很少会用，一般不做深入研究)。电话接入或者弹出信息等其他事件切入 event：

（1）touches：表示当前跟踪的触摸操作的 touch 对象的数组。
（2） targetTouches：特定于事件目标的 Touch 对象的数组。
（3） changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。每个 touch 对象包含的属性
（4） clientX：触摸目标在视口中的 x 坐标。
（5） clientY：触摸目标在视口中的 y 坐标。
（6）identifier：标识触摸的唯一 ID。
（7） pageX：触摸目标在页面中的 x 坐标。
（8） pageY：触摸目标在页面中的 y 坐标。
（9）screenX：触摸目标在屏幕中的 x 坐标。
（10） screenY：触摸目标在屏幕中的 y 坐标。
（11） target：触目的 DOM 节点目标。

13，生命周期

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在

（1）什么是vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载
Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后

（4）第一次页面加载会触发哪几个钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在哪个周期中就已经完成

DOM 渲染在 mounted 中就已经完成了

（6）简单描述每个周期具体适合哪些场景

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

14，Vue 的 nextTick 的原理是什么？

1）为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2）理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

3）理解 nextTick
而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

15，Vue中引入组件的步骤?

1）采用ES6的import ... from ...语法或CommonJS的require()方法引入组件
2）对组件进行注册,代码如下

// 注册
Vue.component('my-component', {
 template: 'A custom component!'
})

3）使用组件

16，说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定

17，vuex

（1）vuex是什么？怎么使用？哪种功能场景使用它？

vue框架中状态管理。在main.js引入store，注入。新建一个目录store，….. export 。

场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

（2）vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module

vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对
象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改
变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中
vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、如果一个状态只在一个组件内使用，是可以不用getters
vuex的Mutation特性
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action
可以包含任意异步操作。

（3）不用Vuex会带来什么问题？

可维护性会下降，想修改数据要维护三个地方；
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背

18，vuex 是基于redux

1）全局的store
2）响应式
3）不能直接修改，commit（mutation）
vuex使用单一状态树吧store的实例注入到所有的子组件，mutation处理同步事务
1）action ：提交mutation，异步
2）module

19，vue更新data

1）异步更新
2）多次更新data，只在最后一次渲染

20，react的setState

1）两个参数。 setState(updater,[callback]) ,第一个参数是更新的对象，第二个参数是更新完成
的回调函数；
2）setStat本身执行过程和代码是同步的
3）合成事件(onClick、onChanged等)和钩子函数中setState是异步的，将多次合并成一次更新；
4）在原生事件和 setTimeout 中都是同步的。
5）浅合并 Objecr.assign()