前端面试题（基础篇九）

一、map与forEach的区别

forEach ⽅法，是最基本的⽅法，就是遍历与循环，默认有3个传参：分别是遍历的数组 内容 item 、数组索引 index 、和当前遍历数组 Array

map ⽅法，基本⽤法与 forEach ⼀致，但是不同的，它会返回⼀个新的数组，所以在 callback需要有 return 值，如果没有，会返回 undefined

二、箭头函数与普通函数的区别？

函数体内的 this 对象，就是定义时所在的对象，⽽不是使⽤时所在的对象

不可以当作构造函数，也就是说，不可以使⽤ new 命令，否则会抛出⼀个错误

不可以使⽤ arguments 对象，该对象在函数体内不存在。如果要⽤，可以⽤ Rest 参数 代替

不可以使⽤ yield 命令，因此箭头函数不能⽤作 Generator 函数

三、异步编程的实现⽅式

回调函数

优点：简单、容易理解

缺点：不利于维护，代码耦合⾼

事件监听(采⽤时间驱动模式，取决于某个事件是否发⽣)：

优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数

缺点：事件驱动型，流程不够清晰

发布/订阅(观察者模式)

类似于事件监听，但是可以通过‘消息中⼼ʼ，了解现在有多少发布者，多少订阅者

Promise对象

优点：可以利⽤then⽅法，进⾏链式写法；可以书写错误时的回调函数；

缺点：编写和理解，相对⽐较难

Generator函数

优点：函数体内外的数据交换、错误处理机制

缺点：流程管理不⽅便

async函数

优点：内置执⾏器、更好的语义、更⼴的适⽤性、返回的是Promise、结构清晰。

缺点：错误处理机制

四、说⼀下Vue的双向绑定数据的原理

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过

Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布 消息给订阅者，触发相应的监听回调

五、浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流 程如下

先根据这个资源的⼀些 http header 判断它是否命中强缓存，如果命中，则直接从本地

获取缓存资源，不会发请求到服务器；

当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另⼀些 request header

验证这个资源是否命中协商缓存，称为 http 再验证，如果命中，服务器将请求返回，但

不返回资源，⽽是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资

源；

强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓

存不对发送请求到服务器，但协商缓存会。

当协商缓存也没命中时，服务器就会将资源发送回客户端。

当 ctrl+f5 强制刷新⽹⻚时，直接从服务器加载，跳过强缓存和协商缓存；

当 f5 刷新⽹⻚时，跳过强缓存，但是会检查协商缓存

强缓存

Expires （该字段是 http1.0 时的规范，值为⼀个绝对时间的 GMT 格式的时间字符

串，代表缓存资源的过期时间）

Cache-Control:max-age （该字段是 http1.1 的规范，强缓存利⽤其 max-age 值来

判断缓存资源的最⼤⽣命周期，它的值单位为秒）

协商缓存

Last-Modified （值为资源最后更新时间，随服务器response返回）

If-Modified-Since （通过⽐较两个时间来判断资源在两次请求期间是否有过修改，如

果没有修改，则命中协商缓存）

ETag （表示资源内容的唯⼀标识，随服务器 response 返回）

If-None-Match （服务器通过⽐较请求头部的 If-None-Match 与当前资源的 ETag 是

否⼀致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）