改造下面的代码，使之输出 0 - 9，写出你能想到的所有解法
for (var i = 0; i< 10; i++){
setTimeout(() => {
console.log(i);
}, 1000)
}
结果：10,10,10,10,10,10,10,10,10,10
利用setTimetout函数的第三个参数作为回掉函数的第一个参数传入
for (var i = 0; i < 10; i++) {
setTimeout(i => {
console.log(i);
}, 1000, i)
}
//等价于
for (var i = 0; i < 10; i++) {
setTimeout(console.log, 1000, i)
}
for (var i = 0; i < 10; i++) {
setTimeout(console.log(i), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout((() => {
console.log(i);
})(), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
})(i), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).call(Object.create(null), i), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).apply(Object.create(null), [i]), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout((i => {
console.log(i);
}).apply(Object.create(null), { length: 1, '0': i }), 1000)
}
利用bind函数部分执行的特点
for (var i = 0; i < 10; i++) {
setTimeout(console.log.bind(Object.create(null), i), 1000)
}
利用 let 变量的特性 — 在每一次 for 循环的过程中，let 声明的变量会在当前的块级作用域里面（for 循环的 body 体，也即两个花括号之间的内容区域）创建一个文法环境（Lexical Environment），该环境里面包括了当前 for 循环过程中的 i
for (let i = 0; i < 10; i++) {
setTimeout(() => {
console.log(i);
}, 1000)
}
//等价于
for (let i = 0; i < 10; i++) {
let _i = i;// const _i = i;
setTimeout(() => {
console.log(_i);
}, 1000)
}
利用函数自执行的方式，把当前 for 循环过程中的 i 传递进去，构建出块级作用域。IIFE 其实并不属于闭包的范畴。
for (var i = 0; i < 10; i++) {
(i => {
setTimeout(() => {
console.log(i);
}, 1000)
})(i)
}
//利用try catch构建块级作用域
for (var i = 0; i < 10; i++) {
try {
throw new Error(i);
} catch ({
message: i
}) {
setTimeout(() => {
console.log(i);
}, 1000)
}
}
利用 eval 或者 new Function 执行字符串，然后执行过程同上
for (var i = 0; i < 10; i++) {
setTimeout(eval('console.log(i)'), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout(new Function('i', 'console.log(i)')(i), 1000)
}
for (var i = 0; i < 10; i++) {
setTimeout(new Function('console.log(i)')(), 1000)
}
Virtual DOM 真的比操作原生 DOM 快吗？谈谈你的想法
下面的代码打印什么内容，为什么？
var b = 10;
(function b(){
b = 20;
console.log(b);
console.log(window.b)
})();
答：ƒ b(){ b = 20; console.log(b); }
10
解析：自执行函数会形成一个内部作用域，b=20时会检查是否存在局部变量b,发现function b存在，就赋值，
但是由于自执行函数是常量不可赋值，所以严格模式下会报错Uncaught TypeError: Assignment to
constant variable,上例不是严格模式，所以是赋值不成功。然后打印b就是f b(){...};如果是window.b=20，
那么第二句打印就是20，如果var b= 20,那么第一句打印就是20
简单改造下面的代码，使之分别打印 10 和 20
var b = 10;
(function b(){
b = 20;
console.log(b);
})();
console.log(window.b) //10
var b = 20 //打印出20
var b = 10;
(function (){ //去掉b局部变量,b就是全局变量，window.b
b = 20;
console.log(b); // 20
})();
var b = 10;
(function (){
console.log(b); // 10
})();
浏览器缓存读取规则
链接：https://www.jianshu.com/p/54cc04190252
Service Worker：
Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。Service Worker 的缓存与浏览器其他内建的缓存机制不同，它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存，并且缓存是持续性的。
Service Worker 实现缓存功能一般分为三个步骤：首先需要先注册 Service Worker，然后监听到 install 事件以后就可以缓存需要的文件，那么在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存的话就可以直接读取缓存文件，否则就去请求数据。当 Service Worker 没有命中缓存的时候，我们需要去调用 fetch 函数获取数据。也就是说，如果我们没有在 Service Worker 命中缓存的话，会根据缓存查找优先级去查找数据。但是不管我们是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示我们是从 Service Worker 中获取的内容。
Memory Cache：
Memory Cache 也就是内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了。
那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？
这是不可能的。计算机中的内存一定比硬盘容量小得多，操作系统需要精打细算内存的使用，所以能让我们使用的内存必然不多。当我们访问过页面以后，再次刷新页面，可以发现很多数据都来自于内存缓存
内存缓存中有一块重要的缓存资源是preloader相关指令下载的资源。总所周知preloader的相关指令已经是页面优化的常见手段之一，它可以一边解析js/css文件，一边网络请求下一个资源。
需要注意的事情是，内存缓存在缓存资源时并不关心返回资源的HTTP缓存头Cache-Control是什么值，同时资源的匹配也并非仅仅是对URL做匹配，还可能会对Content-Type，CORS等其他特征做校验。
Disk Cache：
Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。
在所有浏览器缓存中，Disk Cache 覆盖面基本是最大的。它会根据 HTTP Herder 中的字段判断哪些资源需要缓存，哪些资源可以不请求直接使用，哪些资源已经过期需要重新请求。并且即使在跨站点的情况下，相同地址的资源一旦被硬盘缓存下来，就不会再次去请求数据。绝大部分的缓存都来自 Disk Cache
浏览器会把哪些文件丢进内存中？哪些丢进硬盘中？对于大文件来说，大概率是不存储在内存中的，反之优先当前系统内存使用率高的话，文件优先存储进硬盘
Push Cache：
Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。它只在会话（Session）中存在，一旦会话结束就被释放，并且缓存时间也很短暂，在Chrome浏览器中只有5分钟左右，同时它也并非严格执行HTTP头中的缓存指令。
Push Cache 在国内能够查到的资料很少，也是因为 HTTP/2 在国内不够普及。
- 所有的资源都能被推送，并且能够被缓存,但是 Edge 和 Safari 浏览器支持相对比较差
- 可以推送 no-cache 和 no-store 的资源
- 一旦连接被关闭，Push Cache 就被释放
- 多个页面可以使用同一个HTTP/2的连接，也就可以使用同一个Push Cache。这主要还是依赖浏览器的实现而定，出于对性能的考虑，有的浏览器会对相同域名但不同的tab标签使用同一个HTTP连接。
- Push Cache 中的缓存只能被使用一次
- 浏览器可以拒绝接受已经存在的资源推送
- 你可以给其他域名推送资源
如果以上四种缓存都没有命中的话，那么只能发起请求来获取资源了。那么为了性能上的考虑，大部分的接口都应该选择好缓存策略，通常浏览器缓存策略分为两种：强缓存和协商缓存，并且缓存策略都是通过设置 HTTP Header 来实现的。
使用迭代的方式实现 flatten 函数
function wrap(){
var ret = []
return function flat(arr){
arr.forEach(item=>{
if(Array.isArray(item)){
flat(item)
}
else{
ret.push(item)
}
})
return ret
}
}
console.log(wrap()(arr));
//ES6写法
const flatten=arr=>arr.reduce((acc,cur)=>{
Array.isArray(cur)?[...acc,...flatten(cur)]:[...acc,cur])
},[])
为什么 Vuex的mutation和Redux的reducer中不能进行异步操作？
Mutation必须是同步函数，vuex和redux都是一种状态管理机制。然后他们会有自己的state（状态）和修改state的方法，修改state的方法涉及到同步和异步，vuex的处理方式是同步在mutation里面，异步在actions里面，然后redux的同步就是reducer,异步更多的是用户自己去通过中间件的方式去实现。
要在reducer中加入异步的操作，如果你只是单纯想执行异步操作，不会等待异步的返回，那么在reducer中执行的意义是什么。如果想把异步操作的结果反应在state中，首先整个应用的状态将变的不可预测，违背Redux的设计原则，其次，此时的currentState将会是promise之类而不是我们想要的应用状态，根本是行不通的。
下面代码中 a 在什么情况下会打印 1？
var a = ?; if(a == 1 && a == 2 && a == 3){ console.log(1); }
//判断两个值是否相等的时候，会自动调用他们的toString()方法
var a = [1,2,3];
a.toSting = a.shift
var a = {
i:1,
toString:()=>{
return a.i++
}
}
介绍下 BFC 及其应用。
在 Vue 中，子组件为何不可以修改父组件传递的Prop
因为vue设计是单向数据流，数据的流动方向只能是自上往下的方向，单向数据流易于监测
数据的流动，出现了错误可以更加迅速的定位到错误发生的位置。
