关于前端的面试题汇总

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

好久不见，我又来更新了🙊
今天就来给大家分享一点近期遇到的前端面试题，本来想分开写的，但是本人比较懒，就想着来着大杂烩，把遇到的所有前端面试题给整合一下，主要是让自己也温习一下吧，毕竟现在是计算属性和监听都要记不起来了，太难了~我就是个没人爱的小可怜虫！哭唧唧……
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、css部分

1、块级元素和行内元素分别是什么？

块级元素

会占领页面的一行，其后多个block元素自动换行、 可以设置width，height，设置了width后同样也占领一行、同样也可以设置 margin与padding属性。

比如:常见的块级元素:div,img,ul,form,p等

行级元素

与其他元素在同一行上，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。

比如：b标签 、big字体放大标签、font 字体标签、small - 小字体文本；strong - 粗体强调等

display:inline-block，block，inline元素的区别

1、display：block将元素显示为块级元素，从而可以更好地操控元素的宽高，以及内外边距，每一个块级元素都是从新的一行开始。

2、display : inline将元素显示为行内元素，高度，行高以及底边距不可改变，高度就是内容文字或者图片的宽度，不可以改变。多个相邻的行内元素排在同一行里，知道页面一行排列不下，才会换新的一行。

3、display：inline-block看上去值名inline-block是一个混合产物，实际上确是如此，将元素显示为行内块状元素，设置该属性后，其他的行内块级元素会排列在同一行。比如我们li元素一个inline-block，使其既有block的宽度高度特性，又有inline的同行特性，在同一行内有不同高度内容的元素时，通常要设置对齐方式如vertical-align: top;来使元素顶部对齐

2、让一个盒子居中的方法有哪些？

方法1:宽度和高度已知的。
定位：
给父元素相对定位
给子元素绝对定位
left: 50%;top: 50%;
margin-left: 负的宽度一半。
margin-top: 负的高度一半；

方法2：宽度和高度自己未知
意思就是说子盒子本身还是有宽度和高度的，只是自己未知。
思路：
给父盒子相对定位
给子盒子绝对定位
top、right、bottom、left全为0
margin: auto;

方法3：flex布局

方法四：平移 定位+transform

方法五：table-cell布局
父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;
**水平方向的居中
再加一种水平方向上居中 ：margin-left : 50% ; transform: translateX(-50%);

至少记住前三种吧！别问我详细使用代码，仙女容易发怒😕

3、如何实现两边盒子固定，中间盒子任意拉伸？
双飞翼布局了解一下

4.简述css盒子模型
盒子模型 是 ie 盒子 和标准盒子 ,还有一个怪异盒子
盒子模型是 左外外边距 边框 左内 内边距 内容
右外内边距 边框 右外边距

标准的 盒子模型是 左外外边距 边框 左内 内边距 内容 右外内边距 边框 右外边距

ie 盒子 是 ie的盒子模型 和标准的不太一样

ie的 是 左外边距 边框 （内边距和内容是一体的的）

怪异盒子模型 和 ie的一样

清除浮动的方法？

给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）
父级添加overflow：hidden
使用after伪元素清除浮动
使用before和after双伪元素清除浮动：（较常用）

css3的预处理器

Sass和less的区别
Sass和Less都属于CSS预处理器

Less环境比Sass简单

Less使用比Sass简单

但就国外讨论的热度来说，Sass绝对优于LESS

从功能出发，Sass也比Less略强大一些

另外Less与Sass处理机制也不一样

前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点

html中

二、JavaScript

1.JS数组的常用10种方法详解

Push 在数组末尾插入元素
Pop 删除数组末尾的元素
Unshift 在数组的头部插入元素
Shift 删除数组的头部元素
Concat 数组和数组（或元素）的合并 还可以复制一个新数组
Splice 方法会修改原数组的值;只有一个值时，从当前位置删除到数组末尾
Slice (开始位置，结束位置) 不会更改到原数组的值
Join 指定字符连接字符串
Sort 将数组进行排序(升序),返回新数组，原数组也会改变
Reverse 将数组进行倒序

2、数组去重的方式

Es6的 Set去重 原理是 set里不允许重复（要求元素唯一）
set的特点：无序（存储和读取的顺序可能会不一样） 不允许重复 没有索引
For循环嵌套使用splice
indexOF
Sort
Incsudes
Filter
递归
Map数据结构进行去重
[…new set(arr)]

3、for each和for map的区别

1、map速度比foreach快

2、map会返回一个新数组，不对原数组产生影响,foreach不会产生新数组，foreach返回undefined

3、map因为返回数组所以可以链式操作，foreach不能

4, map里可以用return ,而for each里用return不起作用，for each不能用break，会直接报错

splice和slice的区别

Splice 删除指定元素
Slice 截取某个元素
字符串中的substring()方法也可以截取字符串，跟slice()类似

4、JS中的call、apply、bind方法

bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。
apply、call 区别：
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
apply 、 call 、bind 三者都可以利用后续参数传参；
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用。

5、列举原生查找Dom的方法

通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
获取html的方法（document.documentElement）
document.documentElement是专门获取html这个标签的
获取body的方法（document.body）
document.body是专门获取body这个标签的。

js的基本数据类型有哪些

在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。

ES6 中新增了一种 Symbol 。

JS数据类型：JS的基本类型和引用类型有哪些呢？

基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。

引用类型：object。里面包含的 function、Array、Date。

2.Es6新增的特性

1，模块化思想。
2，关于变量let和const。
3，解构赋值。
4，字符串的扩展。
5，函数的扩展。
6，箭头函数。
7，继承apply的用法
1.新增了块级作用域(let,const)
2、提供了定义类的语法糖(class)
3、新增了一种基本数据类型(Symbol)
4、新增了变量的解构赋值
5、函数参数允许设置默认值，引入了 rest 参数，新增了箭头函数
6、数组新增了一些 API，如 isArray / from / of 方法;数组实例新增了
entries()，keys() 和 values() 等方法
7、对象和数组新增了扩展运算符
8、ES6 新增了模块化(import/export)
9、ES6 新增了 Set 和 Map 数据结构，
set()是用来设置属性的，get()是获取属性值的 被设置和存取的属性主要是起到封装的作用，不允许直接对属性操作 set()和get()不一定同时存在
10、ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例
eg：**语法：let p = new Proxy(target, handler);
11、ES6 新增了生成器(Generator)和遍历器(Iterator)
箭头函数它的this都会指向window(全局对象)
普通函数的this指向调用它的那个对象

箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
箭头函数是匿名函数，不能作为构造函数，不能使用new

箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值

箭头函数没有原型属性
箭头函数不能当做Generator函数,不能使用yield关键字

var与let、const的区别

var声明的变量会挂载在window上，而let和const声明的变量不会

var声明变量存在变量提升，let和const不存在变量提升

let和const声明形成块作用域

闭包的概念：

（回调函数就是闭包）
当一个函数的返回值是另一个函数，返回的那个函数如果调用了父函数的内部变量，且在外部被执行就产生了闭包
闭包是一个环境，也就是高阶环境
闭包 特性
1.函数套函数，
2.内部函数访问外部函数变量，参数
3.变量和参数不会被垃圾回收机制回收

闭包优点
1.变量长期住在在内存中2.不会造成全局污染3.私有成员的存在

闭包的缺点
常驻内存 增大内存的使用量 使用不当会造成内存的泄露

闭包的应用场景
1.setTimeout
通过闭包实现传参效果
2.回调
3.函数防抖 ，节流
防抖：函数被高频触发时停止触发后延时n秒再执行函数
节流：函数被高频触发时延时n秒才会执行
3.封装私有变量

解决闭包内存泄漏的方法

清除定时器
置空 将定义的变量=空
当一个变量需要持久储存的时候用到闭包 比如token 事件委托的时候用到了事件冒泡

判断js中的数据类型的几种方法

Typeof：判断基本数据类型或内置数据类型对于引用数据类型不起作用， 它自身返回的是字符串类型

Instanceof：检测当前实例是否属于某个类的方法， 它是一个操作符

Constructor：检测当前实例的构造函数 利用实例化对象的constructor属性指向构造函数自己 一般用法为 A.constructor

object.prototype.toString.call()：基本数据类型或内置数据类型，判断一个变量的类型是最准确的方法
jquery.type()：无敌万能的方法

通常情况下用typeof 判断就可以了，遇到预知Object类型的情况可以选用instanceof或constructor方法,实在没辙就使用**$.type()**方法。

js如何判断是不是对象

let str = {
       name: '第一',
       age: 12
   }
console.log(typeof str== "object")

判断对象中是否有某一项

let str = {
    name: '第一',
    age: 12
}
console.log(str.hasOwnProperty('name'))

堆内存（引用数据类型，复杂的数据类型）
栈内存（基本数据类型 整数，小数，布尔，）有顺序 有编号 大小相同
字符串是一个经过处理的引用数据类型，所以将它也放在栈内存中

js的运行机制

JS 在同一时间段只能做一件事

JS 同步是单线程，异步可以实现多进程

js 是一门单线程语言，这就意味着所有任务都需要排队，前一个任务结束，后一个任务才会开始。所以就有了 同步任务 和 异步任务。

同步任务指的是，在主线程上排队执行的任务，前一个任务结束，才会开始执行下一个任务；

异步任务指的是，不进入主线程，而进入一个“任务队列”，只有“任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行，而且可以执行多个任务，不会造成阻塞。

事件循环 Event Loop

1.所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
2.主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

3.一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

dep是什么（简单说一下吧 太多了 我自己也记不住）

DEP - 数据执行保护的缩写bai

数据执行保护 (DEP) 是一套软硬件技术，能够在内存上执行额外检查以帮助防止在系统上运行恶意代码

三、Vue

Websocket是什么

Websocket是一个持久化的协议，只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。在程序设计中，这种设计叫做回调

vue的理解

官方解释：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的核心概念是：双向数据绑定和组件系统

vue 双向数据绑定原理----------重点

vue实现双向数据绑定的原理就是利用了object.defineproperty() 来劫持各个属性的 setter 和getter 在数据变动时，发布消息给订阅者，触发相应的回调来渲染视图
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，替换数据，绑定更新函数
3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够收到每个属性变动的通知,绑定的相应回调函数，从而更新视图
属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

在面试中如何应对？
面试官：说一下VUE双向绑定的原理？
答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

代码演示：defineProperty的用法var obj = { };var name;
//第一个参数：定义属性的对象。
//第二个参数：要定义或修改的属性的名称。
//第三个参数：将被定义或修改的属性描述符。

Object.defineProperty(obj, "data", {
//获取值
get: function ()
{ return name; },
//设置值
set: function (val) {
name = val;console.log(val)}})
//赋值调用
setobj.data = 'aaa';
//取值调用
getconsole.log(obj.data);

列举常用指令以及作用

(1)V-for循环
(2)v-on绑定事件
(3)v-model双向数据绑
(4)v-text渲染字符串(5)v-html渲染html节点及字符串
(5)v-if判断(7)v-show显示/隐藏(8)v-bind绑定属性

列举出常用的修饰符

@事件.stop 阻止事件冒泡
@事件.prevent 阻止事件默认行为
@事件.capture 触发事件捕获
@事件.self 当事件在该元素本身 触发回调
@事件.once 只执行一次

v-if和v-for的优先级是什么？如果两者同时出现，怎么优化才能得到更好的性能？

1，v-for的优先级高于v-if
2，如果两者同时存在，可在v-for的外层包裹template这里来进行v-if判断，如果放在一起，每v-for循环一次都需要进行v-if判断（先判断了条件再看是否执行_），影响性能
3，如果v-if判断出现在v-for的内部，可以通过计算属性过滤掉那么不需要的选项

v-if和v-shou的区别

v-if、v-show顾名思义就是用来判断视图层展示效果的
官方解释
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-if和v-show都是用来控制元素的渲染。v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销; v-show调整DOM元素的CSS的dispaly属性 ，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好 ；如果在运行时条件很少改变，则使用 v-if 较好。
对于前台页面的数据展示，这里推荐使用v-show，这样可以减少开发中不必要的麻烦。
性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

http常见状态码

200 OK：表示从客户端发送给服务器的请求被正常处理并返回；

204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）；

206 Patial Content：表示客户端进行了范围请求，并且服务器成功执行了这部分的GET请求，响应报文中包含由Content-Range指定范围的实体内容。

301 Moved Permanently：永久性重定向，表示请求的资源被分配了新的URL，之后应使用更改的URL；

302 Found：临时性重定向，表示请求的资源被分配了新的URL，希望本次访问使用新的URL；

301与302的区别：前者是永久移动，后者是临时移动（之后可能还会更改URL）

303 See Other：表示请求的资源被分配了新的URL，应使用GET方法定向获取请求的资源；

302与303的区别：后者明确表示客户端应当采用GET方式获取资源

304 Not Modified：表示客户端发送附带条件（是指采用GET方法的请求报文中包含if-Match、If-Modified-Since、If-None-Match、If-Range、If-Unmodified-Since中任一首部）的请求时，服务器端允许访问资源，但是请求为满足条件的情况下返回改状态码；

307 Temporary Redirect：临时重定向，与303有着相同的含义，307会遵照浏览器标准不会从POST变成GET；（不同浏览器可能会出现不同的情况）；

400 Bad Request：表示请求报文中存在语法错误；

401 Unauthorized：未经许可，需要通过HTTP认证；

403 Forbidden：服务器拒绝该次访问（访问权限出现问题）

404 Not Found：表示服务器上无法找到请求的资源，除此之外，也可以在服务器拒绝请求但不想给拒绝原因时使用；

500 Inter Server Error：表示服务器在执行请求时发生了错误，也有可能是web应用存在的bug或某些临时的错误时；

503 Server Unavailable：表示服务器暂时处于超负载或正在进行停机维护，无法处理请求；

post和get的区别

1. get是从服务器上获取数据，post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。
5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

HTTP协议中请求方法Get和Post的区别是什么？

Get：是以实体的方式得到由请求URI所指定资源的信息，如果请求URI只是一个数据产生过程，那么最终要在响应实体中返回的是处理过程的结果所指向的资源，而不是处理过程的描述。
Post：用来向目的服务器发出请求，要求它接受被附在请求后的实体，并把它当作请求队列中请求URI所指定资源的附加新子项，Post被设计成用统一的方法实现下列功能：
1：对现有资源的解释
2：向电子公告栏、新闻组、邮件列表或类似讨论组发信息。
3：提交数据块
4：通过附加操作来扩展数据库从上面描述可以看出，Get是向服务器发索取数据的一种请求；而Post是向服务器提交数据的一种请求，要提交的数据位于信息头后面的实体中。

http传输协议中的get和post那个更好？

get的方式是将表单控件的控件名name和取值value信息经过编码后，通过 URL 发送（可以在地址栏里看到）。
而post则将表单的内容通过http发送。一个 get通过URL传送变量，能传送的数据总量比使用post方式所能传送的数据小。get方法将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比post方法好。事实上，post方法可以没有时间限制地传递数据到服务器，用户在浏览器端是看不到这一过程，所以post方法比较适合用于发送一个保密的（比如信用卡号）或者比较大量的数据到服务器。get效率更高，post更加安全，谁也不愿意慢慢看post数据，银行也绝不会用get提交；所以，没有更好，只有具体情况哪个更适合

在vue中使用paomise封装api接口的思路

一、为什么要对paomise进行封装
二、代码可复用强
每写一个vue文件获取api接口都要写get和post会非常的麻烦
所以要对axios进行封装
三、封装的思路
一般我会在项目的src目录中，新建一个 network文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口
1.创建axios，设置baseURL与超出时间
2.拦截请求
3.拦截响应
4.路由拦截

promise是什么？有哪些状态和参数？如何使用？

是异步编程的一种解决方案

如何使用
1.主要用于异步计算
2.可以将异步操作队列化，按照期望的顺序进行，返回符合预期结果
3.可以在对象之间传递操作promise，帮助我们处理对列化
resolve的作用是，将promise从未完成变为完成，异步操作成功时调用，结果传递出去
reject作用是，将promise状态从未完成变为完成，并将异步操作的错误，传递出去

接收成功的方式 .then()来接收
promise 有三个状态：
pending 是 初始状态
fulfilled 是 操作成功的状态
rejected是 操作失败的状态
当 promise 状态发生改变，就会触发 then()里的响应函数处理后续步骤
promise 状态一经改变，不会再变||
使用场景：promise封装api接口
Promise进行异步操作
解决问题：1.回调地域问题2.多个并发请求

什么是过滤器？怎么定义全局和局部过滤器

过滤器是对 即将显示的数据做进一步的筛选处理，然后显示，过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据

全局：
Vue.filter(‘过滤器名’,funciton(val){
//逻辑代码
})
局部
filter：{过滤器名:funciton(参数){
//逻辑代码
}
}

http和https有什么区别?

1、https协议需要到ca申请证书，一般免费证书较少版，因而需要一定费用。权

2、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

4、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

5、HTTP：是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
6、
7、HTTPS：是以安全为目标的HTTP通道，简单讲是HTTP的安全bai，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。
8、
9、HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

http的缓存机制

首先判断是否访问过当前网站，如果访问过直接调用缓存中的数据即可，如未缓存过则强制缓存，如要强行不使用缓存内的数据，直接修改文件名字即可！

单页面应用和多页面应用区别以及优缺点

单页面
只有一个html页面，跳转方式是组件之间的切换
优点：跳转流畅、组件化开发、组件可复用、开发便捷
缺点：首屏加载过慢

多页面
有多个页面，跳转方式是页面之间的跳转
优点：首屏加载块
缺点：跳转速度慢

自定义指令有哪些钩子函数，及自定义指令的使用场景

(1)bind：只调用一次，指令第一次绑定到元素时调用
(2)inserted：被绑定元素插入父节点时调用
(3)update：所在组件的虚拟节点更新时调用
(4)componentUpdated：所在组件的虚拟节点及子虚拟节点全部更新后调用
(5)unbind：只调用一次，指令与元素解绑时调用

v-clock有什么作用

能够解决插值表达式闪烁问题，需要在style中设置样式[v-clock]{display:none}

for…in迭代和for…of有什么区别

推荐for in遍历对象
推荐for of遍历数组
for of弥补for in的不足，for…in 循环出的是 key，for…of 循环出的是 value

For of不能循环普通对象，需要有object.keys（）配合使用
for in 遍历数组可能不是按照顺序遍历，会遍历可枚举属性，比如原型

generator(异步编程，yield，next，await，async)

generator是一个迭代器生成函数他会返回一个 generator对象是ES6提供的一种异步编程解决方案。通过yield标识位和next()方法调用，实现函数的分段执行。

迭代器接口的next方法
基本用法：
1、function关键字与函数名之间有一个星号
2、函数体内部使用yield表达式，定义不同的内部状态
3、必须使用next()调用此函数,否则不会向下执行
4、返回值是一个对象{value,done}
value是内部的值,done是布尔值

function* helloGenerator() {

console.log(“this is generator”);
}
var h = helloGenerator();
调用next（）触发方法
h.next()

yield实际就是暂缓执行的标示，每执行一次next()，相当于指针移动到下一个yield位置。
next的参数传递
我们可以在调用next()的时候传递一个参数，和yield配合使用async await

使用场景：遍历，流程的控制

可以随心所欲的交出和恢复函数的执行权，yield交出执行权，next()恢复执行权。
我认为它解决异步编程的两大问题
回调地狱
用setTimeout方法来模拟异步过程，这种层层嵌套就是回调地狱，Promise就是解决这种回调的解决方案
异步流控
task方法将各类工序"扁平化",解决了层层嵌套的回调地狱；run方法，使各个工序同步执行，实现了异步流控

ajax是什么，如何创建ajax（异步）

ajax的全称是AsynchronousJavascript+XML
就是在无需加载整个网页的情况下，能够部分更新网页的技术
主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新提高用户体验度，提高加载速度

使用场景：谷歌地图，甚至一些弹幕，微博的时时更新评论等等

1.创建一个异步调用对象
2.创建一个新的http请求 指定他的http请求的方法等
3.设置响应http状态变化的函数
4.发送http请求
5.异步调用数据
6.js和dom实现局部刷新

什么是跨域，jsonp的原理

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同。
跨域：不同源则为跨域 （协议、域名、端口号有一个不同则为不同源）
jsonP：动态创建

跨域的解决方案

跨域产生原因就是同源策略
jsonP：

动态创建script标签，然后利用script的src不受同源策略的约束来跨域获取数据。

优点：浏览器兼容性好，
缺点：只支持 get 请求方式，JSONP缺乏错误处理机制，
也可以node.js或者其他服务端设置cors表头来授权跨域
是proxy代理（前端代理和后端通常通过 nginx [N jin ks]实现反向代理）
后端给个接口 前端在请求头使用反向代理设置跨域
定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器 来发送请求，然后将请求的结果传递给前端。
反向代理的作用： （1）保证内网的安全，阻止web攻击
如何使用：
举例：一个小白股民，买股票，让股票基金经理代理买股票。
CORS 是一个W3C标准,全称是"跨域资源共享"（Cross-origin resource sharing），他允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服啦 AJAX 只能同源使用的限制
定义和用法：是现代浏览器支持跨域资源请求的一种最常用的方式。
跨域资源共享 后台工程师设置后端代码来达到前段跨域请求
缺点：浏览器支持所有版本要求Access-control-allow-origin[

说一下从输入 URL 到页面加载完中间发生了什么?

大致过程：
①　DNS解析
将域名解析为ip地址
②　TCP链接
建立一个连接 (TCP 与 ip 地址进行链接时需要经历三次握手的过程)
③　发送http请求
http是超文本语言
④　处理请求返回数据
⑤　渲染页面
⑥　连接结束 （链接结束需要经历四次挥手的过程）
三次握手是连接协议，关闭连接是四次协议

*三次握手(建立连接之前)
连接并没有发送
a. 第一次握手：客户端向服务端发送连接请求；
b. 第二次握手:服务端收到连接请求后如果同意连接，就发送应答；
c. 第三次握手：客户端收到连接同意应答后，向服务端发送确认信息，表示收到。
四次挥手(断开连接之前)
建立连接和断开连接
第一次挥手：第一次挥手是客户端认为他这边的请求发送完毕了，可以进行断开连接了
*第二次挥手：第二次是服务端收到客户端的断开连接的请求，告诉相对于的程序，客户端的请求发送完毕了
第三次挥手：第三次是服务端认为服务端向客户端发送的数据发送完毕了，告诉客户端数据发送完毕，可以正式关闭连接了。
*第四次挥手：*第四次就是客户端收到服务端的数据发送完毕的请求后，把自己要关闭的消息告诉服务端你也可以关闭了，但是这个时候客户度还没有关闭，会进入一个TIME-WAIT状态，这个状态大概是四五分钟，就是要确保自己发送给服务端的确认结束连接请求的信息服务端能够接收到，如果直接关闭那么那条消息就可能丢失，然后服务端接收不到，然后无法正常关闭。
三次握手是连接协议，关闭连接是四次协议

握手
1.建立连接时，客户端发送请求到服务器端，服务器端接受成功
2.服务端发给客户端，客户端知道自己接受成功
3.客户端发给服务器端，服务器知道客户端发送成功

挥手解析
1.客户端请求断开fin
2.服务器确认客户端的断开请求
3.服务器请求断开fin
4.客户端确认服务器的断开ack

Vue 中 methods,computed, watch 的区别

（1）computed 计算属性 计算结果会缓存,只有当依赖值改变才会重新计算
使用场景：开发较大的计算属性
（2）watch 监听属性 一个值的改变 需要另一个值的改变而改变,结果不会缓存
Watch 是监听 data 和计算属性中的新旧变化
（3）methods 事件方法 调用一次，执行一次,结果不会缓存
适用场景：组件中功能的封装

prop 验证，和默认值

作用：用于接收来自父组件的数据（子组件期待获得的数据）
prop也可以通过v-bind动态赋值：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
 

```javascript
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>,

props:会接收不同的数据类型，常用的数据类型的设置默认值的写法
Number, String, Boolean, Array, Function, Object
prop 数据单项传递，父不影响子，子不影响父 不能再组件中直接修改prop传递的值，Vue会发出警告

vue 组件父子，子父，兄弟通信

1、父传递子如何传递
在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值
在子组件通过props:[“自定义属性名”]来接收数据
2、子传递父如何传递
(1) 在父组件中给子组件标签绑定一个自定义事件，给这个事件挂载需要调用的方法
(2) 在子组件的方法通过this.$emit(‘自定义事件名’)来调用这个方法\ast \ast 3、兄弟组件如何通信\ast \ast (1)创建一个空的vue实例BUS(2)通过BUS.$emit(‘事件名’)传到空的vue实例中
(3) 通过BUS.$on(‘事件名’,(参数)=>{挂载从子1传来的数据})来接收

vue生命周期------------------------重点

每一个组件都是独立的，都有属于他自己的生命周期，创建，挂载，更新销毁就是生命周期
beforeCreate 前<创建>后created
beforeMount 前<挂载>后mounted
beforeUpdate 前<更新>后Updated
beforeDestroy 前<销毁>后Destroyed
当keep-alive 缓存组件才会有的生命周期的钩子函数
activated活跃状态 当前组件显示时执行的生命周期
deactivated缓存状态 当前组件缓存时执行的生命周期
errorCaptured 当捕获一个来自子孙组件的错误时被调用。

beforecreate：
在实例初始化之后，
数据观测和事件配置之前被调用，此时组件的选项对象还未创建，
el 和 data 并未初始化，因此无法访问 methods， data， computed 等上的方法和数据。
create：
实例已经创建完成之后被调用
，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event 事件回调，
完成了 data 数据的初始化，el 没有。然而，挂在阶段还没有开始, $el 属性目前不可见，这个周期中是没有什么方法来对实例化过程进行拦截的
beforeMount
挂在开始之前被调用
编译模板，把 data 里面的数据和模板生成 html，完成了 el 和 data 初始化
mounted
挂在完成
，也就是模板中的 HTML 渲染到 HTML 页面中
，此时一般可以做一些 ajax 操作，mounted 只会执行一次。
beforeUpdate
在数据更新之前被调用，发生在虚拟 DOM 重新渲染和打补丁之前，
可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
update
在由于数据更改导致地虚拟 DOM 重新渲染和打补丁只会调用，调用时，组件 DOM 已经更新
，所以可以执行依赖于 DOM 的操作，然后在大多是情况下
， 应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
beforeDestrioy
这一步还可以用 this 来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器和监听的dom
事件
destroyed（销毁后）
在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用

vue 路由传参数如何实现

主要是query和parpams传参
query：通用性好，不会刷新丢失，会在地址栏显示，但是不能和动态路由一起使用
传递：this.$router.push(path:””,quety:值)接受：this.$router.query.参数名

params：刷新会丢失，不会再地址栏显示，能和动态路由一起使用
传递：this.$router.push(name:””,parpms:值)接受：this.$router.params.参数名

路由守卫有哪几种

作用:当我们路由切换到一个组件里面，如果没有权限，不让进入，有权限可以进入
全局路由守卫
全局钩子函数
router.beforeEach 每一个路由改变的时候都得执行一遍，作用：跳转前进行判断拦截。
router.beforeResolve

router.afterEach
组件路由守卫
组件内的钩子函数 跟 methods: {}等同级，组件路由守卫是写在每个单独的 vue 文件里面的路由守卫

to: (Route路由对象) 即将要进入的目标 路由对象
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子
beforeRouteEnter 路由之前调用
beforeRouteUpdate 复用时调用
beforeRouteLeave 离开路由时调用

路由独享守卫
路由独享守卫是在路由配置页面单独给路由配置一个守卫
4、路由独享的守卫： beforeEnter
应用场景：
1.验证用户是否登录，没有登录部分权限页面无法进入，
2.清除当前组件中的定时器，以免占用内存
3.当前页面中有未关闭的窗口或未保存的内容时，阻止页面跳转

vue state,getters,mutations,actions,modules,plugins[pogaisi] 的用途，和用 法---------- 重点

state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为 state 的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations ： 修 改 状 态 ， 并 且 是 同 步 的 。 在 组 件 中 使 用
。这个和我们组件中的自定义事件类似。：异步操作。在组件中使用是​store.dispath(’’)
modules：store 的子模块，为了开发大型项目，方便状态管理而使用的。
、、、、、
State:{ count: 0 } 保存着所有的全局变量
plugins：插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务
Getter： 对state中的数据派生出一些状态，例如对数据进行过滤。（可以认为是store中的计算属性），会对state中的变量进行过滤再保存，只要state中的变量发生了改变，它也会发生变化，不变化的时候，读的缓存。
Mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
一条重要的原则就是要记住 mutation 必须是同步函数。
Action: Action 类似于 mutation, 不同点在于，Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作，mutation只能是同步。
有点不同的是Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
Module： //模块，可以写很多模块，最后都引入到一个文件。分散管理。
生成实例的时候 都放在Store的modules中
plugins：插件（Plugins）是用来拓展webpack功能的，它们会在整个构建过程中生效，执行相关的任务

vue 中 key 的作用

v-bind：key=‘变量’
相当于唯一标识ID。
给每条数据一个标识，方便查找。
让他们具有可复用性
key值主要使用在虚拟DOM算法，即diff算法中
使用场景：v-for

vue自定义指令

【全局指令】

使用 Vue.diretive()（迪瑞体悟）来全局注册指令。

【局部指令】

也可以注册局部指令，组件或 Vue 构造函数中接受一个 directives 的选项。

钩子函数。指令定义函数提供了几个钩子函数（可选）

1.bind：绑定元素的时候调用

2.inserted：绑定的元素插入父节点时调用，

3.update：绑定元素的值改变的时候调用，改变之前，

4.componentupdated：绑定元素的值改变之后调用，

5.unbind：解绑元素的时候调用

自定义钩子函数参数：el，binding[bai ding]

el：绑定的元素，用来操作DOM，
binding：绑定的对象信息。
name：指令的名字，value：指令的值

可以用自定义指令封装一个拖拽的盒子

Vue.directive("drag", {                     //指令的名称
    inserted: function (el, binding) {      //当被绑定的元素插入到 DOM 中时
        el.style.position = "absolute";
        el.style.left = binding.arg.left + "px";
        el.style.top = binding.arg.top + "px";
        el.onmousedown = function (e) {
            var x = e.offsetX;
            var y = e.offsetY;
            document.onmousemove = function (eve) {
                el.style.left = eve.clientX - x + "px";
                el.style.top = eve.clientY - y + "px";
            }
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
}

什么是虚拟dom，diff算法–重点

是什么: 它是一个js对象，用来模拟真实dom节点的结构
目的是 用来高效的渲染页面，减少不必要的DOM操作 提高渲染效率
用来比较两次vdom的结构

diff算法

js对象表示dom树结构，用这个数建立一个真的dom树，插入到文档中
状态更新，重新构造一颗新树，两棵树比较差异
把差异应用到真的dom树上，更新页面视图 的这个过程叫diff 算法

nexttick的作用和响应式原理

$nextTick的作用：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新
理解：就是一个同步和异步的理解 当同步代码执行的时候 执行到一半出现一个异步 就把异步放到任务队列里面去执行 而同步接着往后执行 当异步准备好了之后 不能插队执行 必须等同步执行完之后再去执行异步 排到最后面

则可以在回调中获取更新后的 DOM
vue的响应式原理：数据发生变化后，会重新对页面渲染，这就是Vue响应式，侦测数据的变化，
收集视图依赖了哪些数据，数据变化时，自动“通知”需要更新的视图部分，并进行更新，
对应专业俗语分别是：数据劫持 / 数据代理，依赖收集，发布订阅模式；

vue页面首次加载都触发了哪几个钩子函数

beforeCreate, created,
beforeMount, mounted 。

四、Webpack

什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2、为什要使用WebPack
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
优点：模块化
在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
gulp更像后端开发者的思路，需要对于整个流程了如指掌 webpack更倾向于前端开发者的思路

与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？
同样是基于入口的打包工具还有以下几个主流的：
webpack
rollup
Parcel

Loader和Plugin的不同？
Loader直译为"加载器"。
Plugin直译为"插件"。

webpack的构建流程是什么?
Webpack 的运行流程是一个串行的过程
1、初始化参数
2、开始编译
3、确定入口
4、编译模块
5、完成模块编译
6、输出资源
7、输出完成

防抖节流（原理都一样自己总结吧）

/*防抖函数作用限制多长时间内只能执行一次*/
    function success (event){
        console.log('提交成功')
    }
    //防抖函数
    const debounce = (fn,delay) =>{ // 1
        let timer = null
        return (...args) => { //4
            clearTimeout(timer) //5
            timer= setTimeout(() =>{//3
                fn.apply(this,args) //6
            },delay)
        }
    }
   const oDebounce =  debounce(success,5000) //2
    let btn = document.getElementById('btn')
    btn.addEventListener('click',oDebounce)

总结来说

• 对于按钮防点击来说的实现：如果函数是立即执行的，就立即调用，如果函数是延迟执行的，就缓存上下文和参数，放到延迟函数中去执行。一旦我开始一个定时器，只要我定时器还在，你每次点击我都重新计时。一旦你点累了，定时器时间到，定时器重置为 null，就可以再次点击了。
• 对于延时执行函数来说的实现：清除定时器ID，如果是延迟调用就调用函数

路由的两种模式的区别（前端路由的由来）

vue-router有两种模式，hash模式和history模式

首先书写方式的不同，hash是默认格式地址栏书写是带#号，history整体书写比hash好看

hash模式中刷新时不会携带井号后面的数据，

history是会将地址栏的地址重新请求，所以刷新时 可能会出现资源找不到，报404 ，所以需要后台来配合！

配置路由模式步骤

hash模式

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件 里边有两个属性newURL和oldURL。可以通过模拟改变hash的值，动态页面数据。
尽管浏览器没有请求服务器，但是页面状态和url已经关联起来了，这就是所谓的前端路由，单页应用的标配。

hash路由虽然出现在url中，但是在请求的时候不会被包含在http请求中，对后端来说没有什么影响，所以从另一方面来说hash的改变不会重新加载页面

history模式
把window.history对象打印出来可以看到里边提供的方法和记录长度

**history：**这种模式是利用H5中新增的 pushState() 和 replaceState() 方法，这两个方法用于浏览器的历史记录栈，在当前已有的 back,forword，go 基础上，提供了修改历史记录的功能，当执行修改的时候，虽然修改了当前的url ，浏览器不会立即向后端发送请求

参数传递时；title为页面标题，当前所有浏览器都会 忽略此参数；url为页面地址，可选，缺省为当前页地址；
B)history.replaceState(data, title [, url]) ：更改当前的历史记录，参数同上；
C)history.state：用于存储以上方法的data数据，不同浏览器的读写权限不一样；
D)window.onpopstate：响应pushState或replaceState的调用；有了这几个新的API，针对支持的浏览器，

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

如果你想在github.io上搭一个单页博客，就应该选择hash模式

定时器中this的指向

this的指向是window。

最常用的方法：在外部函数中将this存为一个变量，回调函数中使用该变量，而不是直接使用this。

 1 var name = 'my name is window';
 2 var obj = {
 3     name: 'my name is obj',
 4     fn: function () {
 5         var that = this;
 6         var timer = null;
 7         clearInterval(timer);
 8         timer = setInterval(function () {
 9             console.log(that.name);   //my name is obj
10         }, 1000)
11     }
12 }

在fn中加了var that = this; 回调函数中使用that代替this即可。

改变定时器中的this指向，this指向 要点击的按钮比如 button

箭头函数的this指向

使用es6的箭头函数：箭头函数的最大作用就是this指向。

（1）默认指向定义它时，所处上下文的对象的this指向。即ES6箭头函数里this的指向就是上下文里对象this指向，偶尔没有上下文对象，this就指向window

（2）即使是call，apply，bind等方法也不能改变箭头函数this的指向

说一下vue中，data为什么要return一个对象

为了组件的可复用，因为每个组件实例都有自己的作用域，使用函数return出来可以使每个组件的data数据都相互独立，互不打扰，比如商品列表组件，当你用v-for渲染的时候，每个商品列表组件里的data数据的内容和地址都不同因为每一个函数都会新生成一个空间，直接用对象，就会全部都放在一起，那这个时候就会造成污染全局组件的data里面的属性，

详述Vuex运行机制

(1)Vuex的状态存储是响应式的

(2)当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态

(3)不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

点击商品列表进入详情页后，返回列表时在原来预览位置实现思路

将页面使用keep-alive缓存起来，然后在要离开该页面的时候获取它距离顶部的距离，当再进入的时候把这个顶部距离给他进行一个设置

什么是CDN

CDN的基本原理是各种缓存服务器，将这些缓存服务器分布到用户集中访问的地区或网络中，由缓存服务器直接响应用户请求！

---

# 总结 提示：这里对文章进行总结： 例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

不行了 5个小时的成果 就到这吧 后面争取给细分化一下，点个关注吧🙈