1，flex弹性盒子布局与传统盒模型布局的区别和优点：
答：区别：
盒模型：1)，盒模型内元素分配器父元素空间
2），建立在块级和行级方向上（对块级元素和行内元素的布局），
弹性盒子：1），盒内子元素分配其父元素的可用空间（剩余空的空间）。
2），建立在弹性流上（元素随可显示区域变化呈流式布局）。
优点：自适应，用在移动端开发非常合适，使用简单，哪怕对不定宽高元素依然好用。
2，手写快速排序算法：
function quicksort(arr,l,r){ if(l>r){return;} var temp = arr[l],t,i = l,j = r; while(i!=j){ while(arr[j]>=temp && i<j)j--; while(arr[i]<=temp && i<j)i++; if(i<j){ t = arr[j]; arr[j] = arr[i]; arr[i] = t; } } arr[l] = arr[j]; arr[j] = temp; quicksort(arr,l,i-1); quicksort(arr,i+1,r); } var arr = [12,89,56,3,45,47,15,53,41,32,99,11,8]; quicksort(arr,0,arr.length-1); console.log(arr);
3，POST与GET的区别：
* POST相对GET更安全。
* GET请求参数包含在URL中，而POST放在Request body里面。
* GET请求在浏览器回退的时候是无害的，POST会重新提交请求。
* GET产生的url地址可以被保存为书签，POST不可以。
* GET请求只能进行URL编码，POST无限制。
* GET请求在url传递参数的时候有长度限制，POST没有。
* GET请求会被浏览器自动缓存，POST不会。
* GET请求参数会被完整的保存在历史记录里面，POST中的参数不会被保留。
* 对于参数的数据类型，GET只接受ASCLL字符，POST没有限制。
4，谈谈CSS中的定位与文档流的关系：
relative(相对定位)：设置元素为相对定位的，可以通过left，right，top，bottom来设置元素相对原位置的偏移量。该元素并未脱离文档流，原位置依然保留，其他相邻元素
并不会占用其位置。
absolute(绝对定位)：设置元素为绝对定位，同样可以通过left，right，top，bottom来设置元素相对其父元素或更上层元素中最近的一个设置有position的元素来定位。该元素
会脱离文档流，其后元素会占用其原始位置。
fixed(固定定位)：设置元素为固定定位后，其表现形式与absolute相似，只是它是相对其根元素来偏移。
5，float脱离文档流与absolute定位脱离文档流的表现区别：
float脱离文档流：使用float浮动脱离文档流的时候，其他元素会当该元素不存在，占用其位置，但是其他元素内的文本却可以“看到”浮动元素的原位置，导致其飘在浮动元素
原位置的周围，这就是float的特性。
absolute定位脱离文档流：使用absolute定位脱离文档流的时候，其他元素同样会当该元素不存在，包括其他元素内的文本都会当作浮动元素不存在。
6，CSS3新增属性：
* border-radius(圆角):四个角的圆角大小 | 左上角右下角 右上角左下角 | 左上角 右上角 右下角 左下角；
* box-shadow(盒阴影)：X轴偏移量 Y轴偏移量 模糊距离 阴影大小 阴影颜色 设置阴影为内阴影（inset,可省略）。
* box-sizing：content-box | border-box | inherit;
* linear-gradient(线性渐变)：background:linear-gradient(color1,color2);
* radial-gradient(径向渐变)：background:radial-gradient(color1,color2);
* text-shadow(文字阴影)：X轴偏移量 Y轴偏移量 阴影大小 阴影颜色；
* word-wrap(单词换行)：normal(只允许在断点处换行)|break-world(如果单词过长，截断强制换行);
* word-break(单词换行)：normal(浏览器默认的换行规则，一般是不允许长单词内部换行) | break-all（允许在单词内换行) | keep-all(只能在半角空格或连字符处换行);
7，说出几种垂直居中元素的方法(下面只列出出来常用的三种)：
* display:table-cell; + vertical-align:middle;
* display:flex; + justify-content:center; + align-items:center;
* position:absolute; + left + top
8，谈谈页面的重绘和回流以及优化：
回流（reflow）：当DOM元素的内容，结构，位置或大小发生变化的时候，需要重新计算样式和渲染树。
重绘（repaint）：元素发生的改变，只影响了节点的一些样式，如：边框色，背景色，文字颜色等。只需要应用新样式绘制这个元素。
注：回流的开销大于重绘，一个节点的回流通常会导致它的子节点和统计节点的回流。
触发回流的操作：
* 添加或删除可见的DOM元素。
* 改变元素位置。
* 改变元素尺寸 ---- 边距，边框，宽度，高度。
* 内容改变导致的元素尺寸改变。
* 浏览器窗口尺寸变化。
获取元素某些值的时候也会提前触发回流：offsetLeft / offsetTop / offsetWidth / offsetHeight / scrollTop/Left/width/height / clientTop/Left/width/height等。
触发重绘的操作：
* 因为回流引起的重绘。
* 背景色，边框色，文字颜色更改。
优化：
* 浏览器的自带优化：浏览器会维护一个队列，把所有的会引起回流或重绘的操作放到里面。等队列中的操作到了一定数量的时候或者到了一定时间间隔的时候就会
一起执行这些操作，这样就让多次回流和重绘合并成一次。
* 开发者优化：尽量减少不必要的DOM操作修改，减少对一些style信息的请求。
* 避免逐个修改节点样式，尽量一次性修改。
* 将需要多次修改的DOM设置为display:none；后修改，然后再显示（因为隐藏元素不在渲染树里面，所以修改隐藏元素不会触发回流和重绘）。
* 避免多次读取元素的某些属性。
* 将复杂的节点元素设置脱离文档流，降低回流成本。
9，使用Promise解决以下问题：
for(var i=0;i<10;i++){ window.setTimeout(()=>{ console.log(i); },0); } //10,10,10,10.......
解决代码：
var arr = (()=>{ var arr = []; for(var i=0;i<10;i++){ arr.push(new Promise((resolve,reject)=>{ var a = i; resolve(a); })); } })(); Promise.all(arr).than(dat=>{ console.log(dat); //[0,1,2......,9] for(var i=0,len=dat.length;i<len;i++){ console.log(dat[i]); } });
10.统计一个数组中元素出现初始，结果为一个对象：
let cars = ['张三','李四', '王五', '张三', '王五', '赵六']; let result = cars.reduce((i,j)=>{ i[j] = i[j]?++i[j]:1; return i; },{}); console.log(result); //{张三: 2, 李四: 1, 王五: 2, 赵六: 1}
11.平铺数组到指定深度：
function tiling(arr,dep = 1){ if(dep === 1){ return arr.reduce((i,j)=>i.concat(j),[]); }else{ return arr.reduce((i,j)=>i.concat(Array.isArray(j)?tiling(j,dep-1):j),[]); } };
12，数组去重：
// ES6去重 Array.from(new Set(arr)) 或者 [...new Set(arr)] // 利用对象特性去重 function duplicateRemoval(){ let obj = {},resArr = []; arr.forEach(ite=>{ if(!obj[ite]){ obj[ite] = '111'; resArr.push(ite); }; }); return resArr; };
13，localStorage，sessionStorage和cookie之间的区别：
*，localStorage与sessionStorage之间的区别就是sessionStorage是会话级的，当前页面关闭之后清除当前页面的sessionStorage，而localStorage必须手动清除
*，cookie相比localStorage和sessionStorage存储容量小得多，存储方式不同，再者在浏览器请求新页面的时候cookie会被自动带到请求中发向服务器
**************** Vue相关 ******************
14，watch与computed的区别：
*，Vue中watch与computed的区别最简单的概述就是：watch是通过监听一个属性的值变化来达到关联它变化的业务，而computed是通过依赖其他数据，或其他数据的变化来获得一个关联结果
*，Vue官方推荐能使用computed实现的，尽量使用computed，而不是watch。因为computed是有缓存的
**************** ES6相关 ******************
15，新增的字符串方法有那哪些：
*，includes(str,index)：是否在源字符串中找到对应参数字符串，返回一个boolean值
*，startsWith(str,index)：参数字符串是否在源字符串的头部，返回Boolean值
*，endsWith(str,index)：参数字符串是否在源字符串尾部，返回Boolean值
*，repeat(num)：返回一个新字符串，该字符串为原字符串重复num次
*，padStart(len,str)：字符串头部补全
*，padEnd(len,str)：字符串尾部补全
16，新增的数组方法有哪些：
*，Array.from(arrayLike,[fun])：将类数组对象和可遍历对象（iterable，部署了Iterator接口的数据结构）对象转换为真正的数组
*，Array.of()：将一组参数值转换为数组
*，arr.copyWithin(target,start,end)：将当前数组start-end段内元素复制到target位置（会覆盖原有成员），这个方法会修改原数组
*，arr.find(fun)：在当前数组中找到第一个符合条件的值(即参数回调函数返回true的时候)，并返回，如果找不到返回undefined
*，arr.findIndex(fun)：该方法与find方法类似，只是返回的是符合条件元素的下标，如果没找到返回-1
*，arr.fill(val,start,end)：给数组填充指定值
*，arr.keys()，arr.values()，arr.entries()：新增的几个数组遍历方法，都是返回一个遍历器对象，可以用在for...of中
*，arr.includes(val)：判断数组中是否包含某个值，返回一个Boolean值
17，介绍一下Symbol数据类型：
*，Symbol为原始数据类型，是js中第七种数据类型（null, undefined, boolean, number, string, object, symbol）
*，用作属性名的时候，是独一无二的，保证不会与其他属性名产生冲突
*，Symbol函数接收一个参数，用于标识这份产生的symbol值，参数值应该是个字符串，如果传入非字符串，会被先转换成字符串
*，Symbol值不能与其他类型的值进行运算，会报错
*，Symbol.for([name])：和Symbol()函数一样也会生成一个新的symbol值，区别在于Symbol()函数每次调用都会生成一个新的symbol值，而Symbol.for()会现在全
局（真正意义上的全局，即便在iframe中）先搜索是否已经创建过同名的Symbol值（只会搜索到通过Symbol.for创建的symbol，本质上通过Symbol.for创建symbol，
也同时会触发类似登记的效果，供后面的Symbol.for搜索），如果是，则返回那个symbol值
*，Symbol.keyFor(symbol)：返回一个symbol值对应的标识字符串
****************** 2020-06 *****************
18，如何判断一个请求发生了跨域：
*，在一个请求中，如果请求发起方和请求接收方在协议，域名，端口任意一个不相同的时候都会产生跨域（跨域是浏览器行为）
19，说一说请求中响应码304：
*，当请求一个已经在浏览器缓存中有效存在的文件的时候，服务器会返回304状态码，这个时候浏览器会直接读取缓存中的文件。
*，请求具体流程：
-> 浏览器发出请求
-> 判断浏览器缓存中是否存在请求文件，且文件有Last Modified（最后一次请求时间）
-> 第二步存在的时候，则请求头中会包含If Modified Since字段，字段的值就是缓存文件的Last Modified
-> 服务器拿到请求过来的If Modified Since后，对比当前请求过来的时间和Last Modified，
如果超出设定缓存时间则正常返回完整的响应体和200状态码，未超出则返回304
*，注：虽然304的时候，也向服务器发送了实际请求的，但是在响应的时候，只返回一个响应头部，大大的降低了宽带的消耗
20，给一个元素添加class的方法：
*，setAttribute + getAttribute（我回答的）
*，classList（面试官想听的）：HTML新增的一个操作class的方式，返回一个元素的class相关对象，是一个类数组，上面有一系列操作class的方法 ->
add(添加的class)，
remove(删除饿class)，
replace(要替换的class，替换成的class)
21，箭头函数与普通函数的区别：
*，箭头函数内部没有绑定this，在箭头函数内部使用this的时候，指向的是其父环境中的this
*，箭头函数内部没有绑定arguments，可以使用剩余参数（,,,）代替
*，不能使用构造调用（new），会报错
*，箭头函数没有prototype属性
*，箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象
22，了解过fetch吗？fetch与XMLHttpRequest的区别：
*，fetch是一种http数据请求方式，是XMLHttpRequest的一个替代方案，它的响应结果会返回一个promise对象
*，由于fetch响应结果返回一个promise对象，更好的编写体验，fetch不会主动发送cookie,除非手动配置等
23，Vue里面的computed属性特点，还有它和methods与watch的区别：
*，computed属性在用法上与data属性一致，只不过写法上，computed属性为一个方法，computed的值即为方法的返回值。
当computed属性中依赖的data属性发生变化的时候，会自动触发计算属性的执行。反之，在依赖属性没有发生改变的
情况下，多次使用这个computed属性，会直接返回缓存(computed属性会把计算结果缓存起来)，而不去执行方法
*，computed与methods的区别：在methods方法用在视图上的时候，依赖的data数据发生变化同样会再次执行将结果
反应到视图，区别在于，methods没有缓存机制，每次都会重新执行方法
*，computed与watch的区别：computed在大多数情况下都是适用的，但是computed不支持异步，而watch支持异步
computed是多对一，即可能依赖多个值的变化，在执行某一操作。
watch为一对多，即通过监听一个数据的变化，可以进行多个操作。
24，route有哪两种模式？区别是什么？
*，route有两种模式：hash与history API
*，它们的区别在于：hash模式下，是通过监听浏览器地址hash部分值的变化（地址上会有一个丑陋的#），来触发相
应操作，hash值变化时不会触发浏览器请求。history API有一系列浏览器行为操作方法（前进，后退），还可以
将页面状态保存在state中，像页面进度条这种。history AP路径变化的时候需要后台配置统一匹配页面，否则会404
25，Vuex中直接获取state与使用getter获取state的区别？
*，通常获取state是直接通过 ‘this.$store.state.state‘ 名来获取，而getter的作用类似computed属性，他是state的计算属性
同样有缓存机制，通常getter用来做state的筛选和再处理等
26，谈谈路由守卫：
27，macro tack（宏任务）与micro tack（微任务）分别有哪些
*，macro tack包括：
setTimeout，
MessageChannel：用于创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据(postMessage中使用)
postMessage，
setImmediate：该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。（非标准）
*，micro tack包括：
Promise.then，
MutationObsever：DOM3规范，提供了监视对DOM树所做更改的能力
28，常见HTTP状态码有哪些：
*，200：请求成功
*，204：请求成功，但是服务端没有任何返回（可以理解为一个没有响应体的200状态码，还有一个区别是，对于一些请求成
功会刷新页面的情况，204不会导致浏览器刷新页面和导向新页面）
*，206：请求成功，分段请求的时候，当前请求指定的范围数据请求成功
*，301：永久重定向
*，302：临时重定向
*，304：请求内容对比上次请求，未做修改，使用缓存
*，400：请求无法被服务端理解，通常可能因此请求可是错误或请求参数有误
*，401：请求需要身份验证
*，403：服务端拒绝了这个访问
*，404：服务端找不到对应的请求资源
*，500：服务器异常，通常是服务端处理请求时发生了错误
*，503：服务端故障，导致的服务器异常，甚至不可用
29，ES6 Module与CommonJS模块化的区别：
两个区别：
1）模块输出上的区别：
*，CommonJS输出的是模块的浅拷贝，所以对于模块内的基本类型值，不管在模块内外的修改都不会改变这个已经输出
的基本类型值，且第一次加载一个模块之后，这个模块就会被缓存起来，后面再次对模块的引入，都是引入的这个模块
缓存，可以手动清除这个模块的缓存。
*，ES6 Module输出的是模块的引用，当值发生变化的时候，模块引入的地方值也会发生变化。模块内的变量绑定其所在的
模块内。且也不存在缓存
2）模块加载上的区别：
*，CommonJS是运行时加载的，因为本质上CommonJS模块就是一个对象，模块输入的时候先加载整个模块对象，然后读
取模块对象上的属性或方法
*，ES6 Module是编译时加载的，ES6Module并不是一个对象，使用import加载模块时会被js引擎在编译时静态分析，确定要
加载的是模块的哪个部分，而不是整个模块