目录
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适用于:金融股票数据、看板等。
(来源:牛客网)