前端比较全面的面试题文档，尽情参考。。。

一．HTML和CSS里面的面试题
1.栅格化：栅格化布局是常常绑定在 bootstrap之类的框架上。
2.Flex：意为"弹性布局"，用来为盒状模型提供最大的灵活性
任何一个容器都可以指定为 Flex 布局 ，行内元素也可以使用flex布局
flex-direction属性决定主轴的方向（即项目的排列方向）。
-row（默认值）：主轴为水平方向，起点在左端。
-row-reverse：主轴为水平方向，起点在右端。
-column：主轴为垂直方向，起点在上沿。
-column-reverse：主轴为垂直方向，起点在下沿。
Flex-wrap属性定义，如果一条轴线排不下，如何换行
-nowrap（默认）：不换行。
-wrap：换行，第一行在上方。
-Wrap-reverse：换行，第一行在下方。
3.dpi:图像每英寸长度内的像素点数。
4.rem：rem是长度单位，是相对于HTML根元素，在修改根元素下成比例调整所有字体大小。
5.清除浮动的方法：
-给父元素加overflow-hidden;
-使用伪元素：after;
-使用clear:both;
-给浮动元素后面加一个空标签；
6.居中的方式：
-水平居中
–内联元素水平居中：text-align:center;
–块级元素水平居中：margin:0 auto;
–多块级元素水平居中：如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为display:inline-block和父容器的text-align:center属性从而使多块级元素水平居中。
—利用弹性布局(display:flex)，实现水平居中，其中justify-content:center 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。
-垂直居中
–单行内联(inline-)元素垂直居中:通过设置内联元素的高度(height:100px;)和行高(line-height:100px;)相等，从而使元素垂直居中。
–多行元素垂直居中：利用表布局（display:table;）的vertical-align: middle可以实现子元素的垂直居中。
—利用display:flex;布局实现垂直居中，其中flex-direction: column;justify-content: center;定义主轴方向为纵向。
-水平垂直居中
–固定宽高元素水平垂直居中：通过margin平移元素整体宽度的一半，使元素水平垂直居中；父元素加相对定位position:relative;子元素加绝对定位position:absolute;top:50%;left:50%;
–利用flex布局，其中justify-content:center; 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items:center;属性定义display:flex;子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
7.浏览器IE6下有哪些兼容：
-图片间隙问题：在低版本浏览器中（IE6），如果给父容器设置宽度后，图片会在原来基础上把父元素撑大3-5px；
–解决办法：给父元素添加font-size：0；给图片添加display：block；
-双边距问题：  在IE6中如果对进行浮动的元素设置边距（padding或者margin），边距加倍。
–解决办法：给元素设置display：inline；
-li标签间隙问题： IE6中，如果li标签中的内容设置了高度，li标签之间会有间隙；
–解决办法：给li设置vertical-align：top；
-块状元素默认高度问题：IE6中，部分块状元素会有默认高度（一般为16px-18px之间）；
– 解决办法：给元素添加overflow-hidden或者font-size：0；
二．JS
1.数组去重
-es6 new set+解构赋值
-数组的方法indexOf() ，filter()
2.数组排序
-快速排序（原理：找到一个中间位置的中间值，建两个空的数组，小于中间值的放在左边，大于中间值的放在右边，最后拼接输出。）
-选择排序
-冒泡排序（原理：每两个数都比较一下，如果第一个数比第二个数大，将互换位置，数组中每个数字都这样比较。）
3.面向对象继承
-原型继承：就是将父对象的方法给子类的原型。
-原型链继承：让新实例的原型等于父类的实例。
-混合继承：原型链继承和构造函数继承，结合了两种模式的优点，传参和复用。
-类继承：将父类对象的实例赋值给子类的原型，则子类的原型可以访问到父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。
4.this的改变方式：call，apply，bind三者都可以改变this指向。
-共同点：第一个参数都为改变this指向的参数，若第一参数为null、undefined，this默认指向window。
-区别：call和apply可以自动执行，bind需要手动再次调用。
-区别：call和bind有无数个参数，apply只有两个参数，且第二个参数为数组。
5.this指向问题：this存在于函数中，有一个总的原则：谁调用函数，this就指向谁。
-this指向window的有：普通函数/定时器函数/回调函数/箭头函数
-this指向当前对象（当前操作的元素）的有：对象方法的调用/事件处理函数
-this指向new出来的实例对象：构造函数
6.new做了什么？

• new Object()方法的实质是，使用引用类型Object的构造函数创建了一个新的实例，这个实例拥有Object默认的方法如toString、toLocaleString等。经历了以下四个步骤：
• 创建一个新对象；
• 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；
• 执行构造函数中的代码（为这个新对象添加属性） ；
• 返回新对象。
  7.AJAX的概念：AJAX=异步JS+XML；是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新（也就是可以实现页面局部更新）
  Ajax四部曲：
  -创建Ajax对象 let ajax = new XMLHttpRequst();
  -Ajax的open方法 ajax.open(请求类型，接口地址，是否异步)
  -Ajax的send方法 ajax.send();
  -Ajax对象的事件–onreadystatechange监听就绪状态是否完成
  Ajax.onreadystatechange=function(){
  If(ajax.readyState===4){
  …}}
  8.get和post的区别：
  -get不安全，数据会暴露在地址栏，长度有限制
  -post安全性相对要高，通过头文件传输，长度可以自由设置
  -get和post发送数据的方式不一样，get拼接在地址栏的后面，post通过设置请求头实现，将数据放在send里面。
  9.HTTP和HTTPS的区别：
  -HTTP是超文本传输协议，信息是明文传输；HTTPS是具有安全性SSL加密传输协议。
  -使用的连接方式不同，端口号也不一样，前者是80，后者是443；
  -HTTP是无状态的连接，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输，身份验证的网络协议，比HTTP协议安全。
  10.深拷贝，浅拷贝的理解：例如将A对象赋值给B对象情况下
  -深拷贝是指：修改B对象的属性和方法不会影响到A对象的属性和方法；–值拷贝
  -浅拷贝是指：修改B对象的属性和方法会影响到A对象的属性和方法；–地址的拷贝，只拷贝一层
  -注意点：默认情况下对象之间的直接复制都是浅拷贝；默认情况下一个对象的属性如果是基本数据类型，那么都是深拷贝；如果对象的属性包含 了引用数据类型，才真正的区分深拷贝和浅拷贝。
  三．Jquery
  1.事件代理【委托】
  -事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件；
  -作用：性能要好；针对新创建的元素，直接可以拥有事件；
  -使用场景：为DOM中很多元素绑定相同事件；为DOM中尚不存在的元素绑定事件。
  2.选择器【~ + ^】
  -空格表示后代；>表示亲子代；+表示紧挨着的兄弟；~表示所有兄弟；
  -:nth-child(n) 选择器选取属于其父元素的不限类型的第n个子元素的所有元素；例子：$(“P:nth-child(3)”)--选取属于其父元素的第三个子元素的每个<P>元素；-:nth-of-type(n)选择器选取属于其父元素的特定类型的第n个子元素的所有元素；例子：$(“P:nth-of-type(3)”)–选取属于其父元素的第三个

  元素的每个

  元素。
  $.fn.extends的调用方式：一般由具体的实例对象来调用，主要是用来拓展个选择器，例如$.fn.each();主要功能：给jquery对象添加新的方法。
  四．Node
  1.使用过哪些包管理工具：npm cnpm yarn
  2.Node使用了什么模块化：应用由模块组成，Node.JS中采用common.JS模块规范。
  -一个 JS文件就是一个模块；
  -每个模块都是一个独立的作用域，在这个文件中定义的变量，函数，对象都是私有的，对其他文件不可见。
  五．Vue.JS
  1.VUE.JS是什么？
  -VUE.JS是一个MVVM框架；
  -VUE.JS是一个单项数据流的框架；
  -VUE.JS是一个JS渐进式框架；
  2.VUE的常用指令：指令的目的是操作DOM；

• v-html：转义输出。可以解析XML数据；
• v-text：非转义输出，无法解析XML类型数据；
• v-on：事件处理器；
• v-bind：将数据和属性进行单向数据绑定-将VUE中数据赋值给属性值；
• v-if：条件渲染；（控制的是元素存在与否）
• v-for：列表渲染；
• v-model：双向数据绑定（只用于表单）-VM改变，V随之改变；V改变，VM也随之改变；
• v-show：条件展示；（控制的是元素的display:none属性）
  3.VUE数据响应的理解：响应式是指当数据改变后，VUE会通知到使用该数据的代码；VUE的响应式核心机制是观察者模式。数据是被观察的一方，发生改变时，通知所有的观察者且做出响应。
  VUE深入响应式原理的理解：
  -当视图模型（VM）中的数据模型（M）发生改变时，视图（V）就会进行更新；
  -VUE通过watcher将data中的属性全部使用Object.defineProperty()编程getter和setter，当属性值发生改变时将会触发，然后watcher就会触发，告诉视图（V）进行重新渲染；
  -数据必须放在data选项中才能进行深入响应式。
  VUE双向数据绑定原理：VUE数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的数据劫持，VUE是通过Object.defineProperty()来实现数据劫持，其中会有getter和setter方法；当读取属性值时，就会触发getter()方法，在VIEW中如果数据发生了变化，就会通过Object.defineProperty()对属性设置一个setter函数，当数据改变了就会来触发这个函数。
  4.VUE非响应式情况：
  -数组的下标 解决方案：使用VUE.set||this.KaTeX parse error: Expected 'EOF', got '&' at position 843: …参数显示在地址栏上 ，并用？和&̲号拼接的 12.路由钩子（路由…emit自定义事件，在父组件中监听这个事件并在回调中写相关逻辑；
  -非父子组件通信：通过实例化一个Vue对象( 比如bus = new Vue() )作为母线，在组件中通过事件将参数传递出去( bus.$emit(event,[...args]))，然后在其他组件中再通过bus(这里按照刚前面实例化Vue对象后的叫法)来监听此事件并接受参数(bus.$on(event, callback) )；
  -多组件状态共享：VUEX
  -数据预载：导航完成前获取数据，也就是在点击路由前就拿到数据；
  六．混合开发-小程序
  1.小程序有哪些类型文件：脚本文件：.js;配置文件：.json;页面结构文件：.wxml;样式文件：.wxss;
  2.小程序框架有哪些：mpvue taro;
  3.setData修改数据；
  4.只能使用promise来封装小程序请求；
  5.小程序大小大概在2M；
  七．前端环境有哪些：开发环境，生成环境，测试环境，预上线环境，上线环境；
  八．前端模块化：

1. AMD [ define ] require.js
2. CMD [ define ] sea.js
3. Common.js
4. es模块化
   • export 批量导出
   • export default 单一导出
     九．前端的异步流程：
     1.传统：回调函数；事件；
     2.流行：Promise;generator函数;async函数；nextTick;async.js第三方库；
     十．前端跨域方式：
     1.前端跨域
     -jsonp
     -反向代理 http-proxy-middleware nginx
     2.后端跨域
     -单一设置请求头
     -统一设置请求头
     -使用cros中间件跨域