1解释下闭包
闭包就是能够读取其他函数内部变量得函数。可以理解为定义在一个函数内部的函数。本质上闭包是将函数内部和函数外部连接起来的桥梁。
CSS左右定宽 中间自适应怎样呈现代码（左右div假设宽度为200px）
1. 采用绝对定位。两个div都设置绝对定位，左边div的top和left为0，右边div的top和right为0，将中间div的margin-left和margin-right都设置为200px，可实现此布局。
2.采用浮动定位。左边div设置float: left,右边div设置float: right，将中间div的margin-left和margin-right都设置为200px，可实现此布局。
前端三种缓存的区别 （LocalStorage，SessionStorage和cookie）
localStorage有效期：永不失效，除非web应用主动删除。作用域是限定在文档源，文档源通过协议、主机名以及端口三者来确定。
sessionStorage有效期：窗口关闭或者标签页关闭，存储的数据也就失效了。作用域也是限定在文档源，相同文档源的页面渲染在不同的标签中，sessionStorage的数据是无法共享的。（新建标签打开同一个页面时是无法使用同一个session的）。
cookie默认的有效期非常短，存在于web浏览器会话期间，当浏览器关闭，cookie也就消失了。
三种储存方式中，只有cookie是自动提交到后台的。 cookie最大4k，sessionstorage 和localstorage可以达到5m甚至是更大 。
针对三种存储方式的不同可以应用于不同的场景，cookie多用于登陆状态保存，sessionstorage和localstorage多用于统计访问次数等特定数据的统计和存储
vue的路由和路由钩子函数
vue-router是Vue.js官方的路由插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
第一种：全局钩子函数。
router.beforeEach((to, from, next) => { // 举例: 路由跳转前的操作
console.log('beforeEach')
//next() //如果要跳转的话，一定要写上next()
//next(false) //取消了导航
next() //正常跳转，不写的话，不会跳转
})
router.afterEach((to, from) => { // 举例: 通过跳转后改变document.title
if( to.meta.title ){
window.document.title = to.meta.title //每个路由下title
}else{
window.document.title = '默认的title'
}
})
第二种：针对单个路由钩子函数
beforeEnter(to, from, next){
console.log('beforeEnter')
next() //正常跳转，不写的话，不会跳转
}
第三种：组件级钩子函数
beforeRouteEnter(to, from, next){ // 这个路由钩子函数比生命周期beforeCreate函数先执行，所以this实例还没有创建出来
console.log("beforeRouteEnter")
console.log(this) //这时this还是undefinde，因为这个时候this实例还没有创建出来
next((vm) => { //vm,可以这个vm这个参数来获取this实例,接着就可以做修改了
vm.text = '改变了'
})
},
beforeRouteUpdate(to, from, next){//可以解决二级导航时，页面只渲染一次的问题，也就是导航是否更新了，是否需要更新
console.log('beforeRouteUpdate')
next();
},
beforeRouteLeave(to, from, next){// 当离开组件时，是否允许离开
next()
}
vue的生命周期
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
beforeCreate（创建前） created（创建后）完成数据观测，属性和方法的运算，初始化事件。
beforeMount（载入前） mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。
beforeUpdate（更新前）updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。
beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
vue的父子组件传值
1.父组件与子组件传值
父组件传给子组件：子组件通过props方法接受数据;
子组件传给父组件：$emit方法传递参数
2.非父子组件间的数据传递，兄弟组件传值
eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推 荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）
vue的vuex如何使用
只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，….. export 。
vue中对keep-alive 的了解
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include) 。
vue的axios如何实现拦截
axios.interceptors.request.use() // 开始进行拦截请求。
axios.interceptors.response.use(）//拦截请求响应数据。
vue的axios的如何设置请求头
在封装的get或post请求里增加headers:{}对象 去设置所需要的请求头信息。
vue中 this.$nextTick()
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行.。回调的 this 自动绑定到调用它的实例上。
vue中 key 值的作用
key的作用主要是为了高效的更新虚拟DOM。
vue中 v-on 可以绑定多个方法吗
可以
vue.js的两个核心是什么
数据驱动、组件系统
vue中v-if 和 v-show 区别
v-if按照条件是否渲染，v-show是display的block或none。
vue中route和router的区别
route是路由信息对象，包括path，params，hash，query，fullpath，name，matched等路由信息参数。
而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
vue几种常用的指令
v-for 、 v-if 、v-bind、v-on、v-show、v-else
vue常用的修饰符
.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.
capture: 事件侦听，事件发生的时候会调用
原生JS中的事件委托
事件委托：给父元素绑定事件，用来监听子元素的冒泡事件。也就是事件目标（子元素）不处理事件，把事件委托给父元素去处理。
原生js中的事件冒泡，如何阻止事件冒泡
事件冒泡：同一个事件从最里层冒泡到最外层。
阻止冒泡事件： e.stopPropagation()。 不阻止默认行为，但阻止事件冒泡 。
默认事件： a标签的跳转事件就是默认事件。
阻止默认事件： e.preventDefault(); 不阻止事件冒泡，但阻止默认行为。
什么是跨域，跨域如何解决
浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。
解决跨域： 1. 前端本地proxy跨域代理。2. nginx代理。3.jsonp跨域。4.后端修改设置请求头header
前端的兼容性你做了哪些
1.const问题。说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量
2.集合类对象问题。问题说明：IE下，可以使用 () 或 [] 获取集合类对象;Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象
3.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html。（更多兼容性问题可百度了解）
前端的插件你用过哪些（目前项目vue，所以只举例vue的插件）
1.element-ui 饿了么出品的Vue2的web UI工具套件
2.mint-ui Vue 2的移动UI工具套件
3.vue-swiper 易于使用的轮播滑块组件
4.vue-quill 适用于Vue2的富文本编辑器
5.vue-charts 轻松渲染一个图表
移动端适配， rem,px,em的区别
px:表示的是绝对的像素值，1px就是1像素大小
em:关于em，网上有资料说是关于父元素的，但是其实个人感觉这种说法是不对的，其实em的大小是根据自身的font-size确定的，而只是正常的情况下子元素继承了父元素的font-size
rem:是指根元素的大小，比如跟元素大小是16px(浏览器默认font-size)，那么1rem的大小就是16px
CSS3 新特性有哪些
CSS3实现圆角 (border-radius: 8px)
阴影 (box-shadow: 10px)
对文字加特效 (text-shadow)
线性渐变（gradient）
旋转（transform)：rotate(9deg)
缩放 (transform)：scale(0.85，0.90)
倾斜（transform)：skew（-9deg，0deg）
过渡效果（transition)
动画效果（animation)
css预处理器常用的有哪些
1.SASS 2.LESS 3. stylus
如何让一个div在一个div中垂直水平居中
1.常用方法
①首先是利用定位：子绝父相
②然后将子盒子的left和top均设置为50%，因为定位的原点是在左上角，所有现在的位置是偏右下的
③利用transform的translate()方法移动子盒子宽和高的一半，这样子盒子就到中间来了 或者 margin-left和margin-top盒子宽和高的一半。
2.利用margin:auto;子元素绝对定位，四个参数均为0
3.利用display：flex; 内容居中justify-content:center;两端居中align-items:center。
es6用过哪些
1.申明变量let和const
let和const申明变量，const是申明常亮（申明后值不可修改，修改会报错），let是变量，都是块级作用域，在{}内有效
2.箭头函数
箭头函数的this是定义时的this，不是运行时的，比如在vue中method找this.data的时候找不到，原因是this指向的不是运行时vue的实例，而是定义时的windos
3.字符串模板 ``
4.Promise
最大的好处就是可以链式的调用函数，起到异步回调函数的作用. es7还推出了更加简洁的写法Async/await
5.展开运算符 [...,123,]
6.import导入模块、export导出模块
数组去重（包含es6)
1.利用下标查询
2.es6的Set与Array.from()
set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目,set返回的是一个对象。
Array.from()的作用，可以把伪类数组对象，可迭代对象转化为数组。
3.利用对象的属性去重
思路：每次取出原数组的元素，然后在对象中访问这个属性，如果存在就说明重复
JS的数据类型有哪些
Undefined、Null、Boolean、Number和String,Object,symbol 表示独一无二的值、bigInt 表示任意大的整数
解释原型链
JavaScript 对象（除了 null）在创建的时候就会关联一个对象，这个对象就是原型，每一个对象都会从原型上继承属性，
原型也是对象，所以原型也有原型对象，层层往上，直到 Object.prototype，这就是原型链。
对象都会有一个 __proto__ 属性来访问自己的原型，同时这个原型就是生成该对象的构造函数的 prototype 属性值。
每个原型对象都有一个 constructor 属性，指向相关联的构造函数。
this指向，如何改变this指向
this就是函数运行时自动生成的一个内部对象。 this的指向不是在创建时就决定了，而是由执行环境决定的
全局环境下，this就代表window对象。
对象环境下，this指向对象。
事件对象，在 DOM 事件中使用 this，this 指向了触发事件的 DOM 元素本身
总结下来就是一句话：是谁调用的，this就指向谁
1.可以使用局部变量来代替this指针
常用方法
2.使用call 或 apply 方法
apply和call的作用一样，不同的是传参的形式。 第一个参数都是要更改this指向的对象。后面的参数不同，apply需要以数组的形式传递参数，call是直接字符串参数传递。
git的使用
1.git clone url 先把远程的项目clone下来
2.git add * 把它们添加到缓存区
3.git commit -m '增加备注' 代码提交信息
4.git push origin master 可以把 master 换成你想要推送的任何分支。
5.git pull 同步远程仓库代码
还有其他命令 git checkout 切换分支， git status 查看文件状态， git branch -d 删除某个分支 git log 查看日志等
前端页面有哪三层构成，作用是什么
HTML：结构层 、CSS：样式层 、JavaScript：行为层
H5语义化标签有哪些
Nav， header，footer，Article，Aside，Mark，Section，Video，Datalist 强烈推荐，在我看来就是模糊查询，除了样式之外，非常好用
Canvas，Main主要内容，等等（可以自主去了解）
给你一串字符串 或者一组数组，如何找到重复的 次数（思路是什么）
声明一个变量=0，声明一个空数组，循环判断这组数据，如果空数组中没有这个数据，将这个数据push进去，同时将变量+=1。以此类推。就能得到重复数据的次数。监测数组中是否存在这个元素的属性是includes()。（个人看法）
http状态码
200 OK:请求已正常处理。
400("Bad Request") 客户端方面的问题
500("Internal Server Error") 服务器方面的问题
301("Moved Permanently") 当客户端触发的动作引起了资源URI的变化时发送此响应代码
404("Not Found") 和410("Gone") 当客户端所请求的URI不对应于任何资源时，发送此响应代码
409("Conflict") 当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码
状态码系列
1XX：通知
2XX: 成功
3XX：重定向
4XX：客户端错误
5XX：服务端错误
前端的性能的优化
1.将图片用base64处理
2.使用字体图标来代替图片
3.雪碧图
4.css，html，js以及图片压缩等
5.减少请求数量
6.优化资源加载
1、CSS文件放在head中，先外链，后本页
2、JS文件放在body底部，先外链，后本页
3、处理页面、处理页面布局的JS文件放在head中，如babel-polyfill.js文件
4、body中间尽量不写style标签和script标签
7.webpack优化 等等
告辞！总结到此结束！
网友评论