前端面试题（八）

目录

1.伪数组和数组的区别

2.如何实现可过期的localstorage数据？

3.axios的拦截器原理及应用

4.创建ajax过程

5.fetch 请求方式

6.保持前后端实时通信的方法

---

1.说一说伪数组和数组的区别？

伪数组的类型不是Array，而是Object，而数组类型是Array。可以使用length属性查看长度，也可以使用[index]获取某个元素，但是不能使用数组的其他方法，也不能改变长度，遍历使用for in方法。伪数组的常见场景：1.函数的参数arguments。2.原生js获取DOM：document.querySelector('div') 等。3.jquery获取DOM：$(“div”)等。

伪数组转换成真数组方法：1.Array.prototype.slice.call(伪数组)；2.[].slice.call(伪数组)；3.Array.from(伪数组)；转换后的数组长度由length属性决定。索引不连续时转换结果是连续的，会自动补位。

2.说一说如何实现可过期的localstorage数据？

localStorage只能用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。所以要实现可过期的localStorage缓存的中重点就是：如何清理过期的缓存。目前有两种方法，一种是惰性删除，另一种是定时删除。惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。实现方法是，存储的数据类型是个对象，该对象有两个key，一个是要存储的value值，另一个是当前时间。获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除Cookie。定时删除是指，每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程，获取所有设置过期时间的key判断是否过期，过期就存储到数组中，遍历数组，每隔1S（固定时间）删除5个（固定个数），直到把数组中的key从localstorage中全部删除。 LocalStorage清空应用场景：token存储在LocalStorage中，要清空。

3.说一说axios的拦截器原理及应用？

axios的拦截器的应用场景：请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。axios提供了一个API：拦截器。拦截器分为请求（request）拦截器和响应（response）拦截器。拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和相应拦截器forEach将它们分unshift，push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。从浏览器中创建 XMLHttpRequests，从node.js创建http请求，支持Promise API，可拦截请求和响应，可转换请求数据和响应数据，可取消请求，可自动转换JSON数据，客户端支持防御XSRF。

4.说一说创建ajax过程？

创建ajax过程：

1.创建XHR对象：new XMLHttpRequest()。

2.设置请求参数：request.open(Method, 服务器接口地址)；

3.发送请求：request.send()，如果是get请求不需要参数，post请求需要参数request.send(data)；

4.监听请求成功后的状态变化：根据状态码进行相应的处理。

XHR.onreadystatechange = function() {
    if (XHR.readyState == 4 && XHR.status == 200) {
        console.log(XHR.responseText); // 主动释放,JS本身也会回收的
        XHR = null; 
    } 
}

POST请求需要设置请求头。readyState值说明：0：初始化，XHR对象已经创建，还未执行open；1：载入，已经调用open方法，但是还没发送请求；2：载入完成,请求已经发送完成；3：交互，可以接收到部分数据；4：数据全部返回status值说明；200：成功；404：没有发现文件、查询或URl；500：服务器产生内部错误。

5.说一下fetch 请求方式？

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。Fetch函数就是原生js，没有使用XMLHttpRequest对象。fetch()方法返回一个Promise解析Response来自Request显示状态（成功与否）的方法。

XMLHttpRequest的问题：1.所有的功能全部集中在一个对象上, 容易书写出混乱而且不容易维护的代码。2.采用传统的事件驱动模式, 无法适配新的Promise API Fetch API的特点。3.精细的功能分割: 头部信息, 请求信息, 响应信息等均分布到不同的对象, 更利于处理各种复杂的数据交互场景。4.使用Promise API, 更利于异步代码的书写。5.同源请求也可以自定义不带cookie，某些服务不需要cookie场景下能少些流量。

6.说一下有什么方法可以保持前后端实时通信？

方法有以下几种：

1.轮询是客户端和服务器之间会一直进行连接，每隔一段时间就询问一次。其缺点也很明显：连接数会很多，一个接受，一个发送。而且每次发送请求都会有Http的Header，会很耗流量，也会消耗CPU的利用率。优点就是实现简单，无需做过多的更改。缺点是轮询的间隔过长，会导致用户不能及时接收到更新的数据；轮询的间隔过短，会导致查询请求过多，增加服务器端的负担。

2.长轮询是对轮询的改进版，客户端发送HTTP给服务器之后，如果没有新消息，就一直等待。有新消息，才会返回给客户端。在某种程度上减小了网络带宽和CPU利用率等问题。由于http数据包的头部数据量往往很大（通常有400多个字节），但是真正被服务器需要的数据却很少（有时只有10个字节左右），这样的数据包在网络上周期性的传输，难免对网络带宽是一种浪费。优点是做了优化，有较好的时效性。缺点是保持连接会消耗资源; 服务器没有返回有效数据，程序超时。

3.iframe流方式是在页面中插入一个隐藏的iframe，利用其src属性在服务器和客户端之间创建一条长连接，服务器向iframe传输数据（通常是HTML，内有负责插入信息的javascript），来实时更新页面。优点是消息能够实时到达；浏览器兼容好。缺点是服务器维护一个长连接会增加开销；IE、chrome、Firefox会显示加载没有完成，图标会不停旋转。

4.WebSocket是类似Socket的TCP长连接的通讯模式，一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端断掉连接前，不需要客户端和服务端重新发起连接请求。在海量并发和客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。缺点是浏览器支持程度不一致，不支持断开重连。

5.SSE(Server-Sent Event)是建立在浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。SSE是单向通道，只能服务器向浏览器发送，因为streaming本质上就是下载。 优点是SSE使用HTTP协议，现有的服务器软件都支持。SSE属于轻量级，使用简单；SSE默认支持断线重连。

轮询适用于：小型应用，实时性不高。长轮询适用于：一些早期的对及时性有一些要求的应用：web IM 聊天。iframe适用于：客服通信等。WebSocket适用于：微信、网络互动游戏等。SSE适用于：金融股票数据、看板等。

（来源：牛客网）